<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>IconFont Demo</title>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="../../lib/fonts/demo.css">
  <link rel="stylesheet" href="../../lib/fonts/iconfont.css">
  <script src="../../lib/fonts/iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>

      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1378173" target="_blank" class="nav-more">查看项目</a>

    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">

            <li class="dib">
              <span class="icon ok-icon">&#xe644;</span>
                <div class="name">appreciate</div>
                <div class="code-name">&amp;#xe644;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe645;</span>
                <div class="name">check</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe646;</span>
                <div class="name">close</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe649;</span>
                <div class="name">edit</div>
                <div class="code-name">&amp;#xe649;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe64a;</span>
                <div class="name">emoji</div>
                <div class="code-name">&amp;#xe64a;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe64b;</span>
                <div class="name">favor_fill</div>
                <div class="code-name">&amp;#xe64b;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe64c;</span>
                <div class="name">favor</div>
                <div class="code-name">&amp;#xe64c;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe64f;</span>
                <div class="name">loading</div>
                <div class="code-name">&amp;#xe64f;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe650;</span>
                <div class="name">location_fill</div>
                <div class="code-name">&amp;#xe650;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe651;</span>
                <div class="name">location</div>
                <div class="code-name">&amp;#xe651;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe652;</span>
                <div class="name">phone</div>
                <div class="code-name">&amp;#xe652;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe656;</span>
                <div class="name">round_check_fill</div>
                <div class="code-name">&amp;#xe656;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe657;</span>
                <div class="name">round_check</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe658;</span>
                <div class="name">round_close_fill</div>
                <div class="code-name">&amp;#xe658;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe659;</span>
                <div class="name">round_close</div>
                <div class="code-name">&amp;#xe659;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe65a;</span>
                <div class="name">round_right_fill</div>
                <div class="code-name">&amp;#xe65a;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe65b;</span>
                <div class="name">round_right</div>
                <div class="code-name">&amp;#xe65b;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe65c;</span>
                <div class="name">search</div>
                <div class="code-name">&amp;#xe65c;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe65d;</span>
                <div class="name">taxi</div>
                <div class="code-name">&amp;#xe65d;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe65e;</span>
                <div class="name">time_fill</div>
                <div class="code-name">&amp;#xe65e;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe65f;</span>
                <div class="name">time</div>
                <div class="code-name">&amp;#xe65f;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe661;</span>
                <div class="name">unfold</div>
                <div class="code-name">&amp;#xe661;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe662;</span>
                <div class="name">warn_fill</div>
                <div class="code-name">&amp;#xe662;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe663;</span>
                <div class="name">warn</div>
                <div class="code-name">&amp;#xe663;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe664;</span>
                <div class="name">camera_fill</div>
                <div class="code-name">&amp;#xe664;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe665;</span>
                <div class="name">camera</div>
                <div class="code-name">&amp;#xe665;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe666;</span>
                <div class="name">comment_fill</div>
                <div class="code-name">&amp;#xe666;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe667;</span>
                <div class="name">comment</div>
                <div class="code-name">&amp;#xe667;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe668;</span>
                <div class="name">like_fill</div>
                <div class="code-name">&amp;#xe668;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe669;</span>
                <div class="name">like</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe66a;</span>
                <div class="name">notification_fill</div>
                <div class="code-name">&amp;#xe66a;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe66b;</span>
                <div class="name">notification</div>
                <div class="code-name">&amp;#xe66b;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe66c;</span>
                <div class="name">order</div>
                <div class="code-name">&amp;#xe66c;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe66d;</span>
                <div class="name">same_fill</div>
                <div class="code-name">&amp;#xe66d;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe66e;</span>
                <div class="name">same</div>
                <div class="code-name">&amp;#xe66e;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe671;</span>
                <div class="name">deliver</div>
                <div class="code-name">&amp;#xe671;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe672;</span>
                <div class="name">evaluate</div>
                <div class="code-name">&amp;#xe672;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe673;</span>
                <div class="name">pay</div>
                <div class="code-name">&amp;#xe673;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe675;</span>
                <div class="name">send</div>
                <div class="code-name">&amp;#xe675;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe676;</span>
                <div class="name">shop</div>
                <div class="code-name">&amp;#xe676;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe677;</span>
                <div class="name">ticket</div>
                <div class="code-name">&amp;#xe677;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe678;</span>
                <div class="name">wang</div>
                <div class="code-name">&amp;#xe678;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe679;</span>
                <div class="name">back</div>
                <div class="code-name">&amp;#xe679;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe67c;</span>
                <div class="name">cascades</div>
                <div class="code-name">&amp;#xe67c;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe67e;</span>
                <div class="name">discover</div>
                <div class="code-name">&amp;#xe67e;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe682;</span>
                <div class="name">list</div>
                <div class="code-name">&amp;#xe682;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe684;</span>
                <div class="name">more</div>
                <div class="code-name">&amp;#xe684;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe689;</span>
                <div class="name">scan</div>
                <div class="code-name">&amp;#xe689;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe68a;</span>
                <div class="name">settings</div>
                <div class="code-name">&amp;#xe68a;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe690;</span>
                <div class="name">question_fill</div>
                <div class="code-name">&amp;#xe690;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe691;</span>
                <div class="name">question</div>
                <div class="code-name">&amp;#xe691;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe697;</span>
                <div class="name">shop_fill</div>
                <div class="code-name">&amp;#xe697;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe699;</span>
                <div class="name">form</div>
                <div class="code-name">&amp;#xe699;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe69a;</span>
                <div class="name">wang_fill</div>
                <div class="code-name">&amp;#xe69a;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe69b;</span>
                <div class="name">pic</div>
                <div class="code-name">&amp;#xe69b;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe69c;</span>
                <div class="name">filter</div>
                <div class="code-name">&amp;#xe69c;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe69d;</span>
                <div class="name">footprint</div>
                <div class="code-name">&amp;#xe69d;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe69e;</span>
                <div class="name">top</div>
                <div class="code-name">&amp;#xe69e;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe69f;</span>
                <div class="name">pull_down</div>
                <div class="code-name">&amp;#xe69f;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6a0;</span>
                <div class="name">pull_up</div>
                <div class="code-name">&amp;#xe6a0;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6a3;</span>
                <div class="name">right</div>
                <div class="code-name">&amp;#xe6a3;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6a4;</span>
                <div class="name">refresh</div>
                <div class="code-name">&amp;#xe6a4;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6a5;</span>
                <div class="name">more_android</div>
                <div class="code-name">&amp;#xe6a5;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6a6;</span>
                <div class="name">delete_fill</div>
                <div class="code-name">&amp;#xe6a6;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6ac;</span>
                <div class="name">refund</div>
                <div class="code-name">&amp;#xe6ac;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6af;</span>
                <div class="name">cart</div>
                <div class="code-name">&amp;#xe6af;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6b0;</span>
                <div class="name">qr_code</div>
                <div class="code-name">&amp;#xe6b0;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6b2;</span>
                <div class="name">remind</div>
                <div class="code-name">&amp;#xe6b2;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6b4;</span>
                <div class="name">delete</div>
                <div class="code-name">&amp;#xe6b4;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6b7;</span>
                <div class="name">profile</div>
                <div class="code-name">&amp;#xe6b7;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6b8;</span>
                <div class="name">home</div>
                <div class="code-name">&amp;#xe6b8;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6b9;</span>
                <div class="name">cart_fill</div>
                <div class="code-name">&amp;#xe6b9;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6ba;</span>
                <div class="name">discover_fill</div>
                <div class="code-name">&amp;#xe6ba;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6bb;</span>
                <div class="name">home_fill</div>
                <div class="code-name">&amp;#xe6bb;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6bc;</span>
                <div class="name">message</div>
                <div class="code-name">&amp;#xe6bc;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6bd;</span>
                <div class="name">address_book</div>
                <div class="code-name">&amp;#xe6bd;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6bf;</span>
                <div class="name">link</div>
                <div class="code-name">&amp;#xe6bf;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6c0;</span>
                <div class="name">lock</div>
                <div class="code-name">&amp;#xe6c0;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6c2;</span>
                <div class="name">unlock</div>
                <div class="code-name">&amp;#xe6c2;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6c3;</span>
                <div class="name">vip</div>
                <div class="code-name">&amp;#xe6c3;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6c4;</span>
                <div class="name">weibo</div>
                <div class="code-name">&amp;#xe6c4;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6c5;</span>
                <div class="name">activity</div>
                <div class="code-name">&amp;#xe6c5;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6c7;</span>
                <div class="name">big</div>
                <div class="code-name">&amp;#xe6c7;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6c9;</span>
                <div class="name">friend_add_fill</div>
                <div class="code-name">&amp;#xe6c9;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6ca;</span>
                <div class="name">friend_add</div>
                <div class="code-name">&amp;#xe6ca;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6cb;</span>
                <div class="name">friend_famous</div>
                <div class="code-name">&amp;#xe6cb;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6cc;</span>
                <div class="name">friend</div>
                <div class="code-name">&amp;#xe6cc;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6cd;</span>
                <div class="name">goods</div>
                <div class="code-name">&amp;#xe6cd;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6ce;</span>
                <div class="name">selection</div>
                <div class="code-name">&amp;#xe6ce;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6cf;</span>
                <div class="name">tmall</div>
                <div class="code-name">&amp;#xe6cf;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6d2;</span>
                <div class="name">explore</div>
                <div class="code-name">&amp;#xe6d2;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6d3;</span>
                <div class="name">present</div>
                <div class="code-name">&amp;#xe6d3;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6d4;</span>
                <div class="name">square_check_fill</div>
                <div class="code-name">&amp;#xe6d4;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6d5;</span>
                <div class="name">square</div>
                <div class="code-name">&amp;#xe6d5;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6d6;</span>
                <div class="name">square_check</div>
                <div class="code-name">&amp;#xe6d6;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6d7;</span>
                <div class="name">round</div>
                <div class="code-name">&amp;#xe6d7;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6d8;</span>
                <div class="name">round_add_fill</div>
                <div class="code-name">&amp;#xe6d8;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6d9;</span>
                <div class="name">round_add</div>
                <div class="code-name">&amp;#xe6d9;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6da;</span>
                <div class="name">add</div>
                <div class="code-name">&amp;#xe6da;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6db;</span>
                <div class="name">notification_forbid_fill</div>
                <div class="code-name">&amp;#xe6db;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6dd;</span>
                <div class="name">explore_fill</div>
                <div class="code-name">&amp;#xe6dd;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6de;</span>
                <div class="name">fold</div>
                <div class="code-name">&amp;#xe6de;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6df;</span>
                <div class="name">game</div>
                <div class="code-name">&amp;#xe6df;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6e0;</span>
                <div class="name">redpacket</div>
                <div class="code-name">&amp;#xe6e0;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6e1;</span>
                <div class="name">selection_fill</div>
                <div class="code-name">&amp;#xe6e1;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6e2;</span>
                <div class="name">similar</div>
                <div class="code-name">&amp;#xe6e2;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6e3;</span>
                <div class="name">appreciate_fill</div>
                <div class="code-name">&amp;#xe6e3;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6e4;</span>
                <div class="name">info_fill</div>
                <div class="code-name">&amp;#xe6e4;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6e5;</span>
                <div class="name">info</div>
                <div class="code-name">&amp;#xe6e5;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6e8;</span>
                <div class="name">tao</div>
                <div class="code-name">&amp;#xe6e8;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6e9;</span>
                <div class="name">mobile_tao</div>
                <div class="code-name">&amp;#xe6e9;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6ea;</span>
                <div class="name">forward_fill</div>
                <div class="code-name">&amp;#xe6ea;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6eb;</span>
                <div class="name">forward</div>
                <div class="code-name">&amp;#xe6eb;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6ec;</span>
                <div class="name">recharge_fill</div>
                <div class="code-name">&amp;#xe6ec;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6ed;</span>
                <div class="name">recharge</div>
                <div class="code-name">&amp;#xe6ed;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6ee;</span>
                <div class="name">vipcard</div>
                <div class="code-name">&amp;#xe6ee;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6ef;</span>
                <div class="name">voice</div>
                <div class="code-name">&amp;#xe6ef;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6f0;</span>
                <div class="name">voice_fill</div>
                <div class="code-name">&amp;#xe6f0;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6f1;</span>
                <div class="name">friend_favor</div>
                <div class="code-name">&amp;#xe6f1;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6f2;</span>
                <div class="name">wifi</div>
                <div class="code-name">&amp;#xe6f2;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6f3;</span>
                <div class="name">share</div>
                <div class="code-name">&amp;#xe6f3;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6f4;</span>
                <div class="name">we_fill</div>
                <div class="code-name">&amp;#xe6f4;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6f5;</span>
                <div class="name">we</div>
                <div class="code-name">&amp;#xe6f5;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6f6;</span>
                <div class="name">light_auto</div>
                <div class="code-name">&amp;#xe6f6;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6f7;</span>
                <div class="name">light_forbid</div>
                <div class="code-name">&amp;#xe6f7;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6f8;</span>
                <div class="name">light_fill</div>
                <div class="code-name">&amp;#xe6f8;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6f9;</span>
                <div class="name">camera_rotate</div>
                <div class="code-name">&amp;#xe6f9;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6fa;</span>
                <div class="name">light</div>
                <div class="code-name">&amp;#xe6fa;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6fb;</span>
                <div class="name">bar_code</div>
                <div class="code-name">&amp;#xe6fb;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6fc;</span>
                <div class="name">flashlight_close</div>
                <div class="code-name">&amp;#xe6fc;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6fd;</span>
                <div class="name">flashlight_open</div>
                <div class="code-name">&amp;#xe6fd;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6fe;</span>
                <div class="name">search_list</div>
                <div class="code-name">&amp;#xe6fe;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6ff;</span>
                <div class="name">service</div>
                <div class="code-name">&amp;#xe6ff;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe700;</span>
                <div class="name">sort</div>
                <div class="code-name">&amp;#xe700;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe703;</span>
                <div class="name">down</div>
                <div class="code-name">&amp;#xe703;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe704;</span>
                <div class="name">mobile</div>
                <div class="code-name">&amp;#xe704;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe705;</span>
                <div class="name">mobile_fill</div>
                <div class="code-name">&amp;#xe705;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe706;</span>
                <div class="name">copy</div>
                <div class="code-name">&amp;#xe706;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe707;</span>
                <div class="name">countdown_fill</div>
                <div class="code-name">&amp;#xe707;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe708;</span>
                <div class="name">countdown</div>
                <div class="code-name">&amp;#xe708;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe709;</span>
                <div class="name">notice_fill</div>
                <div class="code-name">&amp;#xe709;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe70a;</span>
                <div class="name">notice</div>
                <div class="code-name">&amp;#xe70a;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe70b;</span>
                <div class="name">qiang</div>
                <div class="code-name">&amp;#xe70b;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe70e;</span>
                <div class="name">upstage_fill</div>
                <div class="code-name">&amp;#xe70e;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe70f;</span>
                <div class="name">upstage</div>
                <div class="code-name">&amp;#xe70f;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe710;</span>
                <div class="name">baby_fill</div>
                <div class="code-name">&amp;#xe710;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe711;</span>
                <div class="name">baby</div>
                <div class="code-name">&amp;#xe711;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe712;</span>
                <div class="name">brand_fill</div>
                <div class="code-name">&amp;#xe712;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe713;</span>
                <div class="name">brand</div>
                <div class="code-name">&amp;#xe713;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe714;</span>
                <div class="name">choiceness_fill</div>
                <div class="code-name">&amp;#xe714;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe715;</span>
                <div class="name">choiceness</div>
                <div class="code-name">&amp;#xe715;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe716;</span>
                <div class="name">clothes_fill</div>
                <div class="code-name">&amp;#xe716;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe717;</span>
                <div class="name">clothes</div>
                <div class="code-name">&amp;#xe717;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe718;</span>
                <div class="name">creative_fill</div>
                <div class="code-name">&amp;#xe718;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe719;</span>
                <div class="name">creative</div>
                <div class="code-name">&amp;#xe719;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe71a;</span>
                <div class="name">female</div>
                <div class="code-name">&amp;#xe71a;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe71b;</span>
                <div class="name">keyboard</div>
                <div class="code-name">&amp;#xe71b;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe71c;</span>
                <div class="name">male</div>
                <div class="code-name">&amp;#xe71c;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe71d;</span>
                <div class="name">new_fill</div>
                <div class="code-name">&amp;#xe71d;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe71e;</span>
                <div class="name">new</div>
                <div class="code-name">&amp;#xe71e;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe71f;</span>
                <div class="name">pull_left</div>
                <div class="code-name">&amp;#xe71f;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe720;</span>
                <div class="name">pull_right</div>
                <div class="code-name">&amp;#xe720;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe721;</span>
                <div class="name">rank_fill</div>
                <div class="code-name">&amp;#xe721;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe722;</span>
                <div class="name">rank</div>
                <div class="code-name">&amp;#xe722;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe723;</span>
                <div class="name">bad</div>
                <div class="code-name">&amp;#xe723;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe724;</span>
                <div class="name">camera_add</div>
                <div class="code-name">&amp;#xe724;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe725;</span>
                <div class="name">focus</div>
                <div class="code-name">&amp;#xe725;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe726;</span>
                <div class="name">friend_fill</div>
                <div class="code-name">&amp;#xe726;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe727;</span>
                <div class="name">camera_add_fill</div>
                <div class="code-name">&amp;#xe727;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe729;</span>
                <div class="name">apps</div>
                <div class="code-name">&amp;#xe729;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe72a;</span>
                <div class="name">paint_fill</div>
                <div class="code-name">&amp;#xe72a;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe72b;</span>
                <div class="name">paint</div>
                <div class="code-name">&amp;#xe72b;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe72c;</span>
                <div class="name">pic_fill</div>
                <div class="code-name">&amp;#xe72c;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe72d;</span>
                <div class="name">refresh_arrow</div>
                <div class="code-name">&amp;#xe72d;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe730;</span>
                <div class="name">mark_fill</div>
                <div class="code-name">&amp;#xe730;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe731;</span>
                <div class="name">mark</div>
                <div class="code-name">&amp;#xe731;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe732;</span>
                <div class="name">present_fill</div>
                <div class="code-name">&amp;#xe732;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe733;</span>
                <div class="name">repeal</div>
                <div class="code-name">&amp;#xe733;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe734;</span>
                <div class="name">album</div>
                <div class="code-name">&amp;#xe734;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe735;</span>
                <div class="name">people_fill</div>
                <div class="code-name">&amp;#xe735;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe736;</span>
                <div class="name">people</div>
                <div class="code-name">&amp;#xe736;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe737;</span>
                <div class="name">service_fill</div>
                <div class="code-name">&amp;#xe737;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe738;</span>
                <div class="name">repair</div>
                <div class="code-name">&amp;#xe738;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe739;</span>
                <div class="name">file</div>
                <div class="code-name">&amp;#xe739;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe73a;</span>
                <div class="name">repair_fill</div>
                <div class="code-name">&amp;#xe73a;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe73b;</span>
                <div class="name">taoxiaopu</div>
                <div class="code-name">&amp;#xe73b;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe73c;</span>
                <div class="name">attention_fill</div>
                <div class="code-name">&amp;#xe73c;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe73d;</span>
                <div class="name">attention</div>
                <div class="code-name">&amp;#xe73d;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe73e;</span>
                <div class="name">command_fill</div>
                <div class="code-name">&amp;#xe73e;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe73f;</span>
                <div class="name">command</div>
                <div class="code-name">&amp;#xe73f;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe740;</span>
                <div class="name">community_fill</div>
                <div class="code-name">&amp;#xe740;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe741;</span>
                <div class="name">community</div>
                <div class="code-name">&amp;#xe741;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe742;</span>
                <div class="name">read</div>
                <div class="code-name">&amp;#xe742;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe743;</span>
                <div class="name">suan</div>
                <div class="code-name">&amp;#xe743;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe744;</span>
                <div class="name">hua</div>
                <div class="code-name">&amp;#xe744;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe745;</span>
                <div class="name">ju</div>
                <div class="code-name">&amp;#xe745;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe748;</span>
                <div class="name">tian</div>
                <div class="code-name">&amp;#xe748;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe74a;</span>
                <div class="name">calendar</div>
                <div class="code-name">&amp;#xe74a;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe74b;</span>
                <div class="name">cut</div>
                <div class="code-name">&amp;#xe74b;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe74c;</span>
                <div class="name">magic</div>
                <div class="code-name">&amp;#xe74c;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe74d;</span>
                <div class="name">backward_fill</div>
                <div class="code-name">&amp;#xe74d;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe74f;</span>
                <div class="name">play_fill</div>
                <div class="code-name">&amp;#xe74f;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe750;</span>
                <div class="name">stop</div>
                <div class="code-name">&amp;#xe750;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe751;</span>
                <div class="name">tag_fill</div>
                <div class="code-name">&amp;#xe751;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe752;</span>
                <div class="name">tag</div>
                <div class="code-name">&amp;#xe752;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe753;</span>
                <div class="name">group</div>
                <div class="code-name">&amp;#xe753;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe755;</span>
                <div class="name">all</div>
                <div class="code-name">&amp;#xe755;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe756;</span>
                <div class="name">back_delete</div>
                <div class="code-name">&amp;#xe756;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe757;</span>
                <div class="name">hot_fill</div>
                <div class="code-name">&amp;#xe757;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe758;</span>
                <div class="name">hot</div>
                <div class="code-name">&amp;#xe758;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe759;</span>
                <div class="name">post</div>
                <div class="code-name">&amp;#xe759;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe75b;</span>
                <div class="name">radio_box</div>
                <div class="code-name">&amp;#xe75b;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe75c;</span>
                <div class="name">round_down</div>
                <div class="code-name">&amp;#xe75c;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe75d;</span>
                <div class="name">upload</div>
                <div class="code-name">&amp;#xe75d;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe760;</span>
                <div class="name">write_fill</div>
                <div class="code-name">&amp;#xe760;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe761;</span>
                <div class="name">write</div>
                <div class="code-name">&amp;#xe761;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe763;</span>
                <div class="name">radio_box_fill</div>
                <div class="code-name">&amp;#xe763;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe764;</span>
                <div class="name">punch</div>
                <div class="code-name">&amp;#xe764;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe765;</span>
                <div class="name">shake</div>
                <div class="code-name">&amp;#xe765;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe701;</span>
                <div class="name">第三方 微博</div>
                <div class="code-name">&amp;#xe701;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe70c;</span>
                <div class="name">第三方 微信</div>
                <div class="code-name">&amp;#xe70c;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe767;</span>
                <div class="name">add</div>
                <div class="code-name">&amp;#xe767;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe768;</span>
                <div class="name">move</div>
                <div class="code-name">&amp;#xe768;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe769;</span>
                <div class="name">safe</div>
                <div class="code-name">&amp;#xe769;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe76d;</span>
                <div class="name">haodian</div>
                <div class="code-name">&amp;#xe76d;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe76e;</span>
                <div class="name">mao</div>
                <div class="code-name">&amp;#xe76e;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe76f;</span>
                <div class="name">qi</div>
                <div class="code-name">&amp;#xe76f;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe770;</span>
                <div class="name">ye</div>
                <div class="code-name">&amp;#xe770;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe771;</span>
                <div class="name">juhuasuan</div>
                <div class="code-name">&amp;#xe771;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe772;</span>
                <div class="name">taoqianggou</div>
                <div class="code-name">&amp;#xe772;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe773;</span>
                <div class="name">tianmao</div>
                <div class="code-name">&amp;#xe773;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe775;</span>
                <div class="name">activity_fill</div>
                <div class="code-name">&amp;#xe775;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe776;</span>
                <div class="name">crown_fill</div>
                <div class="code-name">&amp;#xe776;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe777;</span>
                <div class="name">crown</div>
                <div class="code-name">&amp;#xe777;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe778;</span>
                <div class="name">goods_fill</div>
                <div class="code-name">&amp;#xe778;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe779;</span>
                <div class="name">message_fill</div>
                <div class="code-name">&amp;#xe779;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe77a;</span>
                <div class="name">profile_fill</div>
                <div class="code-name">&amp;#xe77a;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe77b;</span>
                <div class="name">sound</div>
                <div class="code-name">&amp;#xe77b;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe77c;</span>
                <div class="name">sponsor_fill</div>
                <div class="code-name">&amp;#xe77c;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe77d;</span>
                <div class="name">sponsor</div>
                <div class="code-name">&amp;#xe77d;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe77e;</span>
                <div class="name">up_block</div>
                <div class="code-name">&amp;#xe77e;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe77f;</span>
                <div class="name">we_block</div>
                <div class="code-name">&amp;#xe77f;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe780;</span>
                <div class="name">we_unblock</div>
                <div class="code-name">&amp;#xe780;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe782;</span>
                <div class="name">1111</div>
                <div class="code-name">&amp;#xe782;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe78b;</span>
                <div class="name">my</div>
                <div class="code-name">&amp;#xe78b;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe78c;</span>
                <div class="name">my_fill</div>
                <div class="code-name">&amp;#xe78c;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe78d;</span>
                <div class="name">emoji_fill</div>
                <div class="code-name">&amp;#xe78d;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe78e;</span>
                <div class="name">emoji_flash_fill</div>
                <div class="code-name">&amp;#xe78e;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe78f;</span>
                <div class="name">flashbuy_fill</div>
                <div class="code-name">&amp;#xe78f;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe791;</span>
                <div class="name">text</div>
                <div class="code-name">&amp;#xe791;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe794;</span>
                <div class="name">goods_favor</div>
                <div class="code-name">&amp;#xe794;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe795;</span>
                <div class="name">music_fill</div>
                <div class="code-name">&amp;#xe795;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe796;</span>
                <div class="name">music_forbid_fill</div>
                <div class="code-name">&amp;#xe796;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe797;</span>
                <div class="name">xiami_forbid</div>
                <div class="code-name">&amp;#xe797;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe798;</span>
                <div class="name">xiami</div>
                <div class="code-name">&amp;#xe798;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe628;</span>
                <div class="name">选择</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe799;</span>
                <div class="name">round_left_fill</div>
                <div class="code-name">&amp;#xe799;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe79b;</span>
                <div class="name">triangle_down_fill</div>
                <div class="code-name">&amp;#xe79b;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe79c;</span>
                <div class="name">triangle_up_fill</div>
                <div class="code-name">&amp;#xe79c;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe79e;</span>
                <div class="name">round_left_fill</div>
                <div class="code-name">&amp;#xe79e;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe670;</span>
                <div class="name">下拉</div>
                <div class="code-name">&amp;#xe670;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe79f;</span>
                <div class="name">pull_down</div>
                <div class="code-name">&amp;#xe79f;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe63f;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7a1;</span>
                <div class="name">emoji_light</div>
                <div class="code-name">&amp;#xe7a1;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7a3;</span>
                <div class="name">keyboard_light</div>
                <div class="code-name">&amp;#xe7a3;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7a4;</span>
                <div class="name">record_fill</div>
                <div class="code-name">&amp;#xe7a4;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7a5;</span>
                <div class="name">record_light</div>
                <div class="code-name">&amp;#xe7a5;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7a6;</span>
                <div class="name">record</div>
                <div class="code-name">&amp;#xe7a6;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7a7;</span>
                <div class="name">round_add_light</div>
                <div class="code-name">&amp;#xe7a7;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7a8;</span>
                <div class="name">sound_light</div>
                <div class="code-name">&amp;#xe7a8;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7a9;</span>
                <div class="name">cardboard_fill</div>
                <div class="code-name">&amp;#xe7a9;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7aa;</span>
                <div class="name">cardboard</div>
                <div class="code-name">&amp;#xe7aa;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7ab;</span>
                <div class="name">form_fill</div>
                <div class="code-name">&amp;#xe7ab;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7ac;</span>
                <div class="name">coin</div>
                <div class="code-name">&amp;#xe7ac;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7ad;</span>
                <div class="name">sort_light</div>
                <div class="code-name">&amp;#xe7ad;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe612;</span>
                <div class="name">ok</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe614;</span>
                <div class="name">选择</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7af;</span>
                <div class="name">cardboard_forbid</div>
                <div class="code-name">&amp;#xe7af;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7b0;</span>
                <div class="name">circle_fill</div>
                <div class="code-name">&amp;#xe7b0;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7b1;</span>
                <div class="name">circle</div>
                <div class="code-name">&amp;#xe7b1;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7b2;</span>
                <div class="name">attention_forbid</div>
                <div class="code-name">&amp;#xe7b2;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7b3;</span>
                <div class="name">attention_forbid_fill</div>
                <div class="code-name">&amp;#xe7b3;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7b4;</span>
                <div class="name">attention_favor_fill</div>
                <div class="code-name">&amp;#xe7b4;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7b5;</span>
                <div class="name">attention_favor</div>
                <div class="code-name">&amp;#xe7b5;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7b7;</span>
                <div class="name">pic_light</div>
                <div class="code-name">&amp;#xe7b7;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7b8;</span>
                <div class="name">shop_light</div>
                <div class="code-name">&amp;#xe7b8;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7b9;</span>
                <div class="name">voice_light</div>
                <div class="code-name">&amp;#xe7b9;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7ba;</span>
                <div class="name">attention_favor_fill</div>
                <div class="code-name">&amp;#xe7ba;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe61a;</span>
                <div class="name">支付宝</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7bc;</span>
                <div class="name">full</div>
                <div class="code-name">&amp;#xe7bc;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7bd;</span>
                <div class="name">mail</div>
                <div class="code-name">&amp;#xe7bd;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7be;</span>
                <div class="name">people_list</div>
                <div class="code-name">&amp;#xe7be;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7bf;</span>
                <div class="name">goods_new_fill</div>
                <div class="code-name">&amp;#xe7bf;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7c0;</span>
                <div class="name">goods_new</div>
                <div class="code-name">&amp;#xe7c0;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7c1;</span>
                <div class="name">medal_fill</div>
                <div class="code-name">&amp;#xe7c1;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7c2;</span>
                <div class="name">medal</div>
                <div class="code-name">&amp;#xe7c2;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7c3;</span>
                <div class="name">news_fill</div>
                <div class="code-name">&amp;#xe7c3;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7c4;</span>
                <div class="name">news_hot_fill</div>
                <div class="code-name">&amp;#xe7c4;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7c5;</span>
                <div class="name">news_hot</div>
                <div class="code-name">&amp;#xe7c5;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7c6;</span>
                <div class="name">news</div>
                <div class="code-name">&amp;#xe7c6;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7c7;</span>
                <div class="name">video_fill</div>
                <div class="code-name">&amp;#xe7c7;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7c8;</span>
                <div class="name">video</div>
                <div class="code-name">&amp;#xe7c8;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7c9;</span>
                <div class="name">ask_fill</div>
                <div class="code-name">&amp;#xe7c9;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7ca;</span>
                <div class="name">ask</div>
                <div class="code-name">&amp;#xe7ca;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7cb;</span>
                <div class="name">exit</div>
                <div class="code-name">&amp;#xe7cb;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7cc;</span>
                <div class="name">skin_fill</div>
                <div class="code-name">&amp;#xe7cc;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7cd;</span>
                <div class="name">skin</div>
                <div class="code-name">&amp;#xe7cd;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7ce;</span>
                <div class="name">money_bag_fill</div>
                <div class="code-name">&amp;#xe7ce;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7cf;</span>
                <div class="name">usefull_fill</div>
                <div class="code-name">&amp;#xe7cf;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7d0;</span>
                <div class="name">usefull</div>
                <div class="code-name">&amp;#xe7d0;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7d1;</span>
                <div class="name">money_bag</div>
                <div class="code-name">&amp;#xe7d1;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe610;</span>
                <div class="name">下载</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7d3;</span>
                <div class="name">redpacket_fill</div>
                <div class="code-name">&amp;#xe7d3;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7d4;</span>
                <div class="name">subscription</div>
                <div class="code-name">&amp;#xe7d4;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe604;</span>
                <div class="name">选择按钮</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe627;</span>
                <div class="name">第三方</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe728;</span>
                <div class="name">详情</div>
                <div class="code-name">&amp;#xe728;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe660;</span>
                <div class="name">数据</div>
                <div class="code-name">&amp;#xe660;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7d5;</span>
                <div class="name">home_light</div>
                <div class="code-name">&amp;#xe7d5;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe7d6;</span>
                <div class="name">my_light</div>
                <div class="code-name">&amp;#xe7d6;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6dc;</span>
                <div class="name">第三方 QQ</div>
                <div class="code-name">&amp;#xe6dc;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe882;</span>
                <div class="name">中国地图</div>
                <div class="code-name">&amp;#xe882;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe601;</span>
                <div class="name">地图</div>
                <div class="code-name">&amp;#xe601;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe889;</span>
                <div class="name">set</div>
                <div class="code-name">&amp;#xe889;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe781;</span>
                <div class="name">云</div>
                <div class="code-name">&amp;#xe781;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe654;</span>
                <div class="name">控制台</div>
                <div class="code-name">&amp;#xe654;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe61b;</span>
                <div class="name">数据</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe640;</span>
                <div class="name">数据</div>
                <div class="code-name">&amp;#xe640;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe6be;</span>
                <div class="name">第三方</div>
                <div class="code-name">&amp;#xe6be;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe606;</span>
                <div class="name">数据</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe66f;</span>
                <div class="name">控制台</div>
                <div class="code-name">&amp;#xe66f;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe600;</span>
                <div class="name">耳机</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe611;</span>
                <div class="name">设 置</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe674;</span>
                <div class="name">下拉</div>
                <div class="code-name">&amp;#xe674;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe67a;</span>
                <div class="name">下拉</div>
                <div class="code-name">&amp;#xe67a;</div>
              </li>

            <li class="dib">
              <span class="icon ok-icon">&#xe67b;</span>
                <div class="name">下拉</div>
                <div class="code-name">&amp;#xe67b;</div>
              </li>

          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'ok-icon';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#ok-icon') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.ok-icon {
  font-family: "ok-icon" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="ok-icon"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"ok-icon" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">

          <li class="dib">
            <span class="icon ok-icon ok-icon-appreciate"></span>
            <div class="name">
              appreciate
            </div>
            <div class="code-name">.ok-icon-appreciate
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-check"></span>
            <div class="name">
              check
            </div>
            <div class="code-name">.ok-icon-check
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-close"></span>
            <div class="name">
              close
            </div>
            <div class="code-name">.ok-icon-close
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-edit"></span>
            <div class="name">
              edit
            </div>
            <div class="code-name">.ok-icon-edit
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-emoji"></span>
            <div class="name">
              emoji
            </div>
            <div class="code-name">.ok-icon-emoji
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-favorfill"></span>
            <div class="name">
              favor_fill
            </div>
            <div class="code-name">.ok-icon-favorfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-favor"></span>
            <div class="name">
              favor
            </div>
            <div class="code-name">.ok-icon-favor
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-loading"></span>
            <div class="name">
              loading
            </div>
            <div class="code-name">.ok-icon-loading
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-locationfill"></span>
            <div class="name">
              location_fill
            </div>
            <div class="code-name">.ok-icon-locationfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-location"></span>
            <div class="name">
              location
            </div>
            <div class="code-name">.ok-icon-location
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-phone"></span>
            <div class="name">
              phone
            </div>
            <div class="code-name">.ok-icon-phone
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-roundcheckfill"></span>
            <div class="name">
              round_check_fill
            </div>
            <div class="code-name">.ok-icon-roundcheckfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-roundcheck"></span>
            <div class="name">
              round_check
            </div>
            <div class="code-name">.ok-icon-roundcheck
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-roundclosefill"></span>
            <div class="name">
              round_close_fill
            </div>
            <div class="code-name">.ok-icon-roundclosefill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-roundclose"></span>
            <div class="name">
              round_close
            </div>
            <div class="code-name">.ok-icon-roundclose
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-roundrightfill"></span>
            <div class="name">
              round_right_fill
            </div>
            <div class="code-name">.ok-icon-roundrightfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-roundright"></span>
            <div class="name">
              round_right
            </div>
            <div class="code-name">.ok-icon-roundright
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-search"></span>
            <div class="name">
              search
            </div>
            <div class="code-name">.ok-icon-search
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-taxi"></span>
            <div class="name">
              taxi
            </div>
            <div class="code-name">.ok-icon-taxi
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-timefill"></span>
            <div class="name">
              time_fill
            </div>
            <div class="code-name">.ok-icon-timefill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-time"></span>
            <div class="name">
              time
            </div>
            <div class="code-name">.ok-icon-time
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-unfold"></span>
            <div class="name">
              unfold
            </div>
            <div class="code-name">.ok-icon-unfold
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-warnfill"></span>
            <div class="name">
              warn_fill
            </div>
            <div class="code-name">.ok-icon-warnfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-warn"></span>
            <div class="name">
              warn
            </div>
            <div class="code-name">.ok-icon-warn
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-camerafill"></span>
            <div class="name">
              camera_fill
            </div>
            <div class="code-name">.ok-icon-camerafill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-camera"></span>
            <div class="name">
              camera
            </div>
            <div class="code-name">.ok-icon-camera
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-commentfill"></span>
            <div class="name">
              comment_fill
            </div>
            <div class="code-name">.ok-icon-commentfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-comment"></span>
            <div class="name">
              comment
            </div>
            <div class="code-name">.ok-icon-comment
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-likefill"></span>
            <div class="name">
              like_fill
            </div>
            <div class="code-name">.ok-icon-likefill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-like"></span>
            <div class="name">
              like
            </div>
            <div class="code-name">.ok-icon-like
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-notificationfill"></span>
            <div class="name">
              notification_fill
            </div>
            <div class="code-name">.ok-icon-notificationfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-notification"></span>
            <div class="name">
              notification
            </div>
            <div class="code-name">.ok-icon-notification
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-order"></span>
            <div class="name">
              order
            </div>
            <div class="code-name">.ok-icon-order
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-samefill"></span>
            <div class="name">
              same_fill
            </div>
            <div class="code-name">.ok-icon-samefill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-same"></span>
            <div class="name">
              same
            </div>
            <div class="code-name">.ok-icon-same
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-deliver"></span>
            <div class="name">
              deliver
            </div>
            <div class="code-name">.ok-icon-deliver
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-evaluate"></span>
            <div class="name">
              evaluate
            </div>
            <div class="code-name">.ok-icon-evaluate
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-pay"></span>
            <div class="name">
              pay
            </div>
            <div class="code-name">.ok-icon-pay
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-send"></span>
            <div class="name">
              send
            </div>
            <div class="code-name">.ok-icon-send
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-shop"></span>
            <div class="name">
              shop
            </div>
            <div class="code-name">.ok-icon-shop
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-ticket"></span>
            <div class="name">
              ticket
            </div>
            <div class="code-name">.ok-icon-ticket
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-wang"></span>
            <div class="name">
              wang
            </div>
            <div class="code-name">.ok-icon-wang
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-back"></span>
            <div class="name">
              back
            </div>
            <div class="code-name">.ok-icon-back
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-cascades"></span>
            <div class="name">
              cascades
            </div>
            <div class="code-name">.ok-icon-cascades
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-discover"></span>
            <div class="name">
              discover
            </div>
            <div class="code-name">.ok-icon-discover
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-list"></span>
            <div class="name">
              list
            </div>
            <div class="code-name">.ok-icon-list
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-more"></span>
            <div class="name">
              more
            </div>
            <div class="code-name">.ok-icon-more
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-scan"></span>
            <div class="name">
              scan
            </div>
            <div class="code-name">.ok-icon-scan
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-settings"></span>
            <div class="name">
              settings
            </div>
            <div class="code-name">.ok-icon-settings
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-questionfill"></span>
            <div class="name">
              question_fill
            </div>
            <div class="code-name">.ok-icon-questionfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-question"></span>
            <div class="name">
              question
            </div>
            <div class="code-name">.ok-icon-question
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-shopfill"></span>
            <div class="name">
              shop_fill
            </div>
            <div class="code-name">.ok-icon-shopfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-form"></span>
            <div class="name">
              form
            </div>
            <div class="code-name">.ok-icon-form
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-wangfill"></span>
            <div class="name">
              wang_fill
            </div>
            <div class="code-name">.ok-icon-wangfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-pic"></span>
            <div class="name">
              pic
            </div>
            <div class="code-name">.ok-icon-pic
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-filter"></span>
            <div class="name">
              filter
            </div>
            <div class="code-name">.ok-icon-filter
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-footprint"></span>
            <div class="name">
              footprint
            </div>
            <div class="code-name">.ok-icon-footprint
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-top"></span>
            <div class="name">
              top
            </div>
            <div class="code-name">.ok-icon-top
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-pulldown"></span>
            <div class="name">
              pull_down
            </div>
            <div class="code-name">.ok-icon-pulldown
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-pullup"></span>
            <div class="name">
              pull_up
            </div>
            <div class="code-name">.ok-icon-pullup
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-right"></span>
            <div class="name">
              right
            </div>
            <div class="code-name">.ok-icon-right
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-refresh"></span>
            <div class="name">
              refresh
            </div>
            <div class="code-name">.ok-icon-refresh
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-moreandroid"></span>
            <div class="name">
              more_android
            </div>
            <div class="code-name">.ok-icon-moreandroid
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-deletefill"></span>
            <div class="name">
              delete_fill
            </div>
            <div class="code-name">.ok-icon-deletefill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-refund"></span>
            <div class="name">
              refund
            </div>
            <div class="code-name">.ok-icon-refund
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-cart"></span>
            <div class="name">
              cart
            </div>
            <div class="code-name">.ok-icon-cart
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-qrcode"></span>
            <div class="name">
              qr_code
            </div>
            <div class="code-name">.ok-icon-qrcode
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-remind"></span>
            <div class="name">
              remind
            </div>
            <div class="code-name">.ok-icon-remind
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-delete"></span>
            <div class="name">
              delete
            </div>
            <div class="code-name">.ok-icon-delete
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-profile"></span>
            <div class="name">
              profile
            </div>
            <div class="code-name">.ok-icon-profile
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-home"></span>
            <div class="name">
              home
            </div>
            <div class="code-name">.ok-icon-home
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-cartfill"></span>
            <div class="name">
              cart_fill
            </div>
            <div class="code-name">.ok-icon-cartfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-discoverfill"></span>
            <div class="name">
              discover_fill
            </div>
            <div class="code-name">.ok-icon-discoverfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-homefill"></span>
            <div class="name">
              home_fill
            </div>
            <div class="code-name">.ok-icon-homefill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-message"></span>
            <div class="name">
              message
            </div>
            <div class="code-name">.ok-icon-message
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-addressbook"></span>
            <div class="name">
              address_book
            </div>
            <div class="code-name">.ok-icon-addressbook
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-link"></span>
            <div class="name">
              link
            </div>
            <div class="code-name">.ok-icon-link
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-lock"></span>
            <div class="name">
              lock
            </div>
            <div class="code-name">.ok-icon-lock
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-unlock"></span>
            <div class="name">
              unlock
            </div>
            <div class="code-name">.ok-icon-unlock
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-vip"></span>
            <div class="name">
              vip
            </div>
            <div class="code-name">.ok-icon-vip
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-weibo"></span>
            <div class="name">
              weibo
            </div>
            <div class="code-name">.ok-icon-weibo
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-activity"></span>
            <div class="name">
              activity
            </div>
            <div class="code-name">.ok-icon-activity
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-big"></span>
            <div class="name">
              big
            </div>
            <div class="code-name">.ok-icon-big
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-friendaddfill"></span>
            <div class="name">
              friend_add_fill
            </div>
            <div class="code-name">.ok-icon-friendaddfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-friendadd"></span>
            <div class="name">
              friend_add
            </div>
            <div class="code-name">.ok-icon-friendadd
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-friendfamous"></span>
            <div class="name">
              friend_famous
            </div>
            <div class="code-name">.ok-icon-friendfamous
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-friend"></span>
            <div class="name">
              friend
            </div>
            <div class="code-name">.ok-icon-friend
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-goods"></span>
            <div class="name">
              goods
            </div>
            <div class="code-name">.ok-icon-goods
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-selection"></span>
            <div class="name">
              selection
            </div>
            <div class="code-name">.ok-icon-selection
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-tmall"></span>
            <div class="name">
              tmall
            </div>
            <div class="code-name">.ok-icon-tmall
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-explore"></span>
            <div class="name">
              explore
            </div>
            <div class="code-name">.ok-icon-explore
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-present"></span>
            <div class="name">
              present
            </div>
            <div class="code-name">.ok-icon-present
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-squarecheckfill"></span>
            <div class="name">
              square_check_fill
            </div>
            <div class="code-name">.ok-icon-squarecheckfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-square"></span>
            <div class="name">
              square
            </div>
            <div class="code-name">.ok-icon-square
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-squarecheck"></span>
            <div class="name">
              square_check
            </div>
            <div class="code-name">.ok-icon-squarecheck
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-round"></span>
            <div class="name">
              round
            </div>
            <div class="code-name">.ok-icon-round
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-roundaddfill"></span>
            <div class="name">
              round_add_fill
            </div>
            <div class="code-name">.ok-icon-roundaddfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-roundadd"></span>
            <div class="name">
              round_add
            </div>
            <div class="code-name">.ok-icon-roundadd
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-add"></span>
            <div class="name">
              add
            </div>
            <div class="code-name">.ok-icon-add
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-notificationforbidfill"></span>
            <div class="name">
              notification_forbid_fill
            </div>
            <div class="code-name">.ok-icon-notificationforbidfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-explorefill"></span>
            <div class="name">
              explore_fill
            </div>
            <div class="code-name">.ok-icon-explorefill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-fold"></span>
            <div class="name">
              fold
            </div>
            <div class="code-name">.ok-icon-fold
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-game"></span>
            <div class="name">
              game
            </div>
            <div class="code-name">.ok-icon-game
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-redpacket"></span>
            <div class="name">
              redpacket
            </div>
            <div class="code-name">.ok-icon-redpacket
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-selectionfill"></span>
            <div class="name">
              selection_fill
            </div>
            <div class="code-name">.ok-icon-selectionfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-similar"></span>
            <div class="name">
              similar
            </div>
            <div class="code-name">.ok-icon-similar
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-appreciatefill"></span>
            <div class="name">
              appreciate_fill
            </div>
            <div class="code-name">.ok-icon-appreciatefill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-infofill"></span>
            <div class="name">
              info_fill
            </div>
            <div class="code-name">.ok-icon-infofill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-info"></span>
            <div class="name">
              info
            </div>
            <div class="code-name">.ok-icon-info
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-tao"></span>
            <div class="name">
              tao
            </div>
            <div class="code-name">.ok-icon-tao
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-mobiletao"></span>
            <div class="name">
              mobile_tao
            </div>
            <div class="code-name">.ok-icon-mobiletao
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-forwardfill"></span>
            <div class="name">
              forward_fill
            </div>
            <div class="code-name">.ok-icon-forwardfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-forward"></span>
            <div class="name">
              forward
            </div>
            <div class="code-name">.ok-icon-forward
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-rechargefill"></span>
            <div class="name">
              recharge_fill
            </div>
            <div class="code-name">.ok-icon-rechargefill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-recharge"></span>
            <div class="name">
              recharge
            </div>
            <div class="code-name">.ok-icon-recharge
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-vipcard"></span>
            <div class="name">
              vipcard
            </div>
            <div class="code-name">.ok-icon-vipcard
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-voice"></span>
            <div class="name">
              voice
            </div>
            <div class="code-name">.ok-icon-voice
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-voicefill"></span>
            <div class="name">
              voice_fill
            </div>
            <div class="code-name">.ok-icon-voicefill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-friendfavor"></span>
            <div class="name">
              friend_favor
            </div>
            <div class="code-name">.ok-icon-friendfavor
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-wifi"></span>
            <div class="name">
              wifi
            </div>
            <div class="code-name">.ok-icon-wifi
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-share"></span>
            <div class="name">
              share
            </div>
            <div class="code-name">.ok-icon-share
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-wefill"></span>
            <div class="name">
              we_fill
            </div>
            <div class="code-name">.ok-icon-wefill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-we"></span>
            <div class="name">
              we
            </div>
            <div class="code-name">.ok-icon-we
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-lightauto"></span>
            <div class="name">
              light_auto
            </div>
            <div class="code-name">.ok-icon-lightauto
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-lightforbid"></span>
            <div class="name">
              light_forbid
            </div>
            <div class="code-name">.ok-icon-lightforbid
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-lightfill"></span>
            <div class="name">
              light_fill
            </div>
            <div class="code-name">.ok-icon-lightfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-camerarotate"></span>
            <div class="name">
              camera_rotate
            </div>
            <div class="code-name">.ok-icon-camerarotate
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-light"></span>
            <div class="name">
              light
            </div>
            <div class="code-name">.ok-icon-light
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-barcode"></span>
            <div class="name">
              bar_code
            </div>
            <div class="code-name">.ok-icon-barcode
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-flashlightclose"></span>
            <div class="name">
              flashlight_close
            </div>
            <div class="code-name">.ok-icon-flashlightclose
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-flashlightopen"></span>
            <div class="name">
              flashlight_open
            </div>
            <div class="code-name">.ok-icon-flashlightopen
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-searchlist"></span>
            <div class="name">
              search_list
            </div>
            <div class="code-name">.ok-icon-searchlist
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-service"></span>
            <div class="name">
              service
            </div>
            <div class="code-name">.ok-icon-service
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-sort"></span>
            <div class="name">
              sort
            </div>
            <div class="code-name">.ok-icon-sort
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-down"></span>
            <div class="name">
              down
            </div>
            <div class="code-name">.ok-icon-down
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-mobile"></span>
            <div class="name">
              mobile
            </div>
            <div class="code-name">.ok-icon-mobile
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-mobilefill"></span>
            <div class="name">
              mobile_fill
            </div>
            <div class="code-name">.ok-icon-mobilefill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-copy"></span>
            <div class="name">
              copy
            </div>
            <div class="code-name">.ok-icon-copy
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-countdownfill"></span>
            <div class="name">
              countdown_fill
            </div>
            <div class="code-name">.ok-icon-countdownfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-countdown"></span>
            <div class="name">
              countdown
            </div>
            <div class="code-name">.ok-icon-countdown
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-noticefill"></span>
            <div class="name">
              notice_fill
            </div>
            <div class="code-name">.ok-icon-noticefill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-notice"></span>
            <div class="name">
              notice
            </div>
            <div class="code-name">.ok-icon-notice
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-qiang"></span>
            <div class="name">
              qiang
            </div>
            <div class="code-name">.ok-icon-qiang
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-upstagefill"></span>
            <div class="name">
              upstage_fill
            </div>
            <div class="code-name">.ok-icon-upstagefill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-upstage"></span>
            <div class="name">
              upstage
            </div>
            <div class="code-name">.ok-icon-upstage
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-babyfill"></span>
            <div class="name">
              baby_fill
            </div>
            <div class="code-name">.ok-icon-babyfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-baby"></span>
            <div class="name">
              baby
            </div>
            <div class="code-name">.ok-icon-baby
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-brandfill"></span>
            <div class="name">
              brand_fill
            </div>
            <div class="code-name">.ok-icon-brandfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-brand"></span>
            <div class="name">
              brand
            </div>
            <div class="code-name">.ok-icon-brand
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-choicenessfill"></span>
            <div class="name">
              choiceness_fill
            </div>
            <div class="code-name">.ok-icon-choicenessfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-choiceness"></span>
            <div class="name">
              choiceness
            </div>
            <div class="code-name">.ok-icon-choiceness
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-clothesfill"></span>
            <div class="name">
              clothes_fill
            </div>
            <div class="code-name">.ok-icon-clothesfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-clothes"></span>
            <div class="name">
              clothes
            </div>
            <div class="code-name">.ok-icon-clothes
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-creativefill"></span>
            <div class="name">
              creative_fill
            </div>
            <div class="code-name">.ok-icon-creativefill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-creative"></span>
            <div class="name">
              creative
            </div>
            <div class="code-name">.ok-icon-creative
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-female"></span>
            <div class="name">
              female
            </div>
            <div class="code-name">.ok-icon-female
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-keyboard"></span>
            <div class="name">
              keyboard
            </div>
            <div class="code-name">.ok-icon-keyboard
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-male"></span>
            <div class="name">
              male
            </div>
            <div class="code-name">.ok-icon-male
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-newfill"></span>
            <div class="name">
              new_fill
            </div>
            <div class="code-name">.ok-icon-newfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-new"></span>
            <div class="name">
              new
            </div>
            <div class="code-name">.ok-icon-new
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-pullleft"></span>
            <div class="name">
              pull_left
            </div>
            <div class="code-name">.ok-icon-pullleft
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-pullright"></span>
            <div class="name">
              pull_right
            </div>
            <div class="code-name">.ok-icon-pullright
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-rankfill"></span>
            <div class="name">
              rank_fill
            </div>
            <div class="code-name">.ok-icon-rankfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-rank"></span>
            <div class="name">
              rank
            </div>
            <div class="code-name">.ok-icon-rank
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-bad"></span>
            <div class="name">
              bad
            </div>
            <div class="code-name">.ok-icon-bad
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-cameraadd"></span>
            <div class="name">
              camera_add
            </div>
            <div class="code-name">.ok-icon-cameraadd
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-focus"></span>
            <div class="name">
              focus
            </div>
            <div class="code-name">.ok-icon-focus
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-friendfill"></span>
            <div class="name">
              friend_fill
            </div>
            <div class="code-name">.ok-icon-friendfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-cameraaddfill"></span>
            <div class="name">
              camera_add_fill
            </div>
            <div class="code-name">.ok-icon-cameraaddfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-apps"></span>
            <div class="name">
              apps
            </div>
            <div class="code-name">.ok-icon-apps
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-paintfill"></span>
            <div class="name">
              paint_fill
            </div>
            <div class="code-name">.ok-icon-paintfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-paint"></span>
            <div class="name">
              paint
            </div>
            <div class="code-name">.ok-icon-paint
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-picfill"></span>
            <div class="name">
              pic_fill
            </div>
            <div class="code-name">.ok-icon-picfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-refresharrow"></span>
            <div class="name">
              refresh_arrow
            </div>
            <div class="code-name">.ok-icon-refresharrow
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-markfill"></span>
            <div class="name">
              mark_fill
            </div>
            <div class="code-name">.ok-icon-markfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-mark"></span>
            <div class="name">
              mark
            </div>
            <div class="code-name">.ok-icon-mark
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-presentfill"></span>
            <div class="name">
              present_fill
            </div>
            <div class="code-name">.ok-icon-presentfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-repeal"></span>
            <div class="name">
              repeal
            </div>
            <div class="code-name">.ok-icon-repeal
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-album"></span>
            <div class="name">
              album
            </div>
            <div class="code-name">.ok-icon-album
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-peoplefill"></span>
            <div class="name">
              people_fill
            </div>
            <div class="code-name">.ok-icon-peoplefill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-people"></span>
            <div class="name">
              people
            </div>
            <div class="code-name">.ok-icon-people
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-servicefill"></span>
            <div class="name">
              service_fill
            </div>
            <div class="code-name">.ok-icon-servicefill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-repair"></span>
            <div class="name">
              repair
            </div>
            <div class="code-name">.ok-icon-repair
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-file"></span>
            <div class="name">
              file
            </div>
            <div class="code-name">.ok-icon-file
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-repairfill"></span>
            <div class="name">
              repair_fill
            </div>
            <div class="code-name">.ok-icon-repairfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-taoxiaopu"></span>
            <div class="name">
              taoxiaopu
            </div>
            <div class="code-name">.ok-icon-taoxiaopu
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-attentionfill"></span>
            <div class="name">
              attention_fill
            </div>
            <div class="code-name">.ok-icon-attentionfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-attention"></span>
            <div class="name">
              attention
            </div>
            <div class="code-name">.ok-icon-attention
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-commandfill"></span>
            <div class="name">
              command_fill
            </div>
            <div class="code-name">.ok-icon-commandfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-command"></span>
            <div class="name">
              command
            </div>
            <div class="code-name">.ok-icon-command
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-communityfill"></span>
            <div class="name">
              community_fill
            </div>
            <div class="code-name">.ok-icon-communityfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-community"></span>
            <div class="name">
              community
            </div>
            <div class="code-name">.ok-icon-community
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-read"></span>
            <div class="name">
              read
            </div>
            <div class="code-name">.ok-icon-read
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-suan"></span>
            <div class="name">
              suan
            </div>
            <div class="code-name">.ok-icon-suan
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-hua"></span>
            <div class="name">
              hua
            </div>
            <div class="code-name">.ok-icon-hua
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-ju"></span>
            <div class="name">
              ju
            </div>
            <div class="code-name">.ok-icon-ju
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-tian"></span>
            <div class="name">
              tian
            </div>
            <div class="code-name">.ok-icon-tian
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-calendar"></span>
            <div class="name">
              calendar
            </div>
            <div class="code-name">.ok-icon-calendar
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-cut"></span>
            <div class="name">
              cut
            </div>
            <div class="code-name">.ok-icon-cut
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-magic"></span>
            <div class="name">
              magic
            </div>
            <div class="code-name">.ok-icon-magic
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-backwardfill"></span>
            <div class="name">
              backward_fill
            </div>
            <div class="code-name">.ok-icon-backwardfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-playfill"></span>
            <div class="name">
              play_fill
            </div>
            <div class="code-name">.ok-icon-playfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-stop"></span>
            <div class="name">
              stop
            </div>
            <div class="code-name">.ok-icon-stop
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-tagfill"></span>
            <div class="name">
              tag_fill
            </div>
            <div class="code-name">.ok-icon-tagfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-tag"></span>
            <div class="name">
              tag
            </div>
            <div class="code-name">.ok-icon-tag
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-group"></span>
            <div class="name">
              group
            </div>
            <div class="code-name">.ok-icon-group
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-all"></span>
            <div class="name">
              all
            </div>
            <div class="code-name">.ok-icon-all
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-backdelete"></span>
            <div class="name">
              back_delete
            </div>
            <div class="code-name">.ok-icon-backdelete
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-hotfill"></span>
            <div class="name">
              hot_fill
            </div>
            <div class="code-name">.ok-icon-hotfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-hot"></span>
            <div class="name">
              hot
            </div>
            <div class="code-name">.ok-icon-hot
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-post"></span>
            <div class="name">
              post
            </div>
            <div class="code-name">.ok-icon-post
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-radiobox"></span>
            <div class="name">
              radio_box
            </div>
            <div class="code-name">.ok-icon-radiobox
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-rounddown"></span>
            <div class="name">
              round_down
            </div>
            <div class="code-name">.ok-icon-rounddown
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-upload"></span>
            <div class="name">
              upload
            </div>
            <div class="code-name">.ok-icon-upload
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-writefill"></span>
            <div class="name">
              write_fill
            </div>
            <div class="code-name">.ok-icon-writefill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-write"></span>
            <div class="name">
              write
            </div>
            <div class="code-name">.ok-icon-write
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-radioboxfill"></span>
            <div class="name">
              radio_box_fill
            </div>
            <div class="code-name">.ok-icon-radioboxfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-punch"></span>
            <div class="name">
              punch
            </div>
            <div class="code-name">.ok-icon-punch
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-shake"></span>
            <div class="name">
              shake
            </div>
            <div class="code-name">.ok-icon-shake
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-disanfangweibo"></span>
            <div class="name">
              第三方 微博
            </div>
            <div class="code-name">.ok-icon-disanfangweibo
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-disanfangweixin"></span>
            <div class="name">
              第三方 微信
            </div>
            <div class="code-name">.ok-icon-disanfangweixin
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-add1"></span>
            <div class="name">
              add
            </div>
            <div class="code-name">.ok-icon-add1
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-move"></span>
            <div class="name">
              move
            </div>
            <div class="code-name">.ok-icon-move
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-safe"></span>
            <div class="name">
              safe
            </div>
            <div class="code-name">.ok-icon-safe
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-haodian"></span>
            <div class="name">
              haodian
            </div>
            <div class="code-name">.ok-icon-haodian
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-mao"></span>
            <div class="name">
              mao
            </div>
            <div class="code-name">.ok-icon-mao
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-qi"></span>
            <div class="name">
              qi
            </div>
            <div class="code-name">.ok-icon-qi
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-ye"></span>
            <div class="name">
              ye
            </div>
            <div class="code-name">.ok-icon-ye
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-juhuasuan"></span>
            <div class="name">
              juhuasuan
            </div>
            <div class="code-name">.ok-icon-juhuasuan
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-taoqianggou"></span>
            <div class="name">
              taoqianggou
            </div>
            <div class="code-name">.ok-icon-taoqianggou
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-tianmao"></span>
            <div class="name">
              tianmao
            </div>
            <div class="code-name">.ok-icon-tianmao
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-activityfill"></span>
            <div class="name">
              activity_fill
            </div>
            <div class="code-name">.ok-icon-activityfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-crownfill"></span>
            <div class="name">
              crown_fill
            </div>
            <div class="code-name">.ok-icon-crownfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-crown"></span>
            <div class="name">
              crown
            </div>
            <div class="code-name">.ok-icon-crown
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-goodsfill"></span>
            <div class="name">
              goods_fill
            </div>
            <div class="code-name">.ok-icon-goodsfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-messagefill"></span>
            <div class="name">
              message_fill
            </div>
            <div class="code-name">.ok-icon-messagefill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-profilefill"></span>
            <div class="name">
              profile_fill
            </div>
            <div class="code-name">.ok-icon-profilefill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-sound"></span>
            <div class="name">
              sound
            </div>
            <div class="code-name">.ok-icon-sound
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-sponsorfill"></span>
            <div class="name">
              sponsor_fill
            </div>
            <div class="code-name">.ok-icon-sponsorfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-sponsor"></span>
            <div class="name">
              sponsor
            </div>
            <div class="code-name">.ok-icon-sponsor
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-upblock"></span>
            <div class="name">
              up_block
            </div>
            <div class="code-name">.ok-icon-upblock
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-weblock"></span>
            <div class="name">
              we_block
            </div>
            <div class="code-name">.ok-icon-weblock
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-weunblock"></span>
            <div class="name">
              we_unblock
            </div>
            <div class="code-name">.ok-icon-weunblock
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-1111"></span>
            <div class="name">
              1111
            </div>
            <div class="code-name">.ok-icon-1111
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-my"></span>
            <div class="name">
              my
            </div>
            <div class="code-name">.ok-icon-my
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-myfill"></span>
            <div class="name">
              my_fill
            </div>
            <div class="code-name">.ok-icon-myfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-emojifill"></span>
            <div class="name">
              emoji_fill
            </div>
            <div class="code-name">.ok-icon-emojifill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-emojiflashfill"></span>
            <div class="name">
              emoji_flash_fill
            </div>
            <div class="code-name">.ok-icon-emojiflashfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-flashbuyfill-copy"></span>
            <div class="name">
              flashbuy_fill
            </div>
            <div class="code-name">.ok-icon-flashbuyfill-copy
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-text"></span>
            <div class="name">
              text
            </div>
            <div class="code-name">.ok-icon-text
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-goodsfavor"></span>
            <div class="name">
              goods_favor
            </div>
            <div class="code-name">.ok-icon-goodsfavor
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-musicfill"></span>
            <div class="name">
              music_fill
            </div>
            <div class="code-name">.ok-icon-musicfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-musicforbidfill"></span>
            <div class="name">
              music_forbid_fill
            </div>
            <div class="code-name">.ok-icon-musicforbidfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-xiamiforbid"></span>
            <div class="name">
              xiami_forbid
            </div>
            <div class="code-name">.ok-icon-xiamiforbid
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-xiami"></span>
            <div class="name">
              xiami
            </div>
            <div class="code-name">.ok-icon-xiami
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-xuanze"></span>
            <div class="name">
              选择
            </div>
            <div class="code-name">.ok-icon-xuanze
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-roundleftfill"></span>
            <div class="name">
              round_left_fill
            </div>
            <div class="code-name">.ok-icon-roundleftfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-triangledownfill"></span>
            <div class="name">
              triangle_down_fill
            </div>
            <div class="code-name">.ok-icon-triangledownfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-triangleupfill"></span>
            <div class="name">
              triangle_up_fill
            </div>
            <div class="code-name">.ok-icon-triangleupfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-roundleftfill-copy"></span>
            <div class="name">
              round_left_fill
            </div>
            <div class="code-name">.ok-icon-roundleftfill-copy
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-right1"></span>
            <div class="name">
              下拉
            </div>
            <div class="code-name">.ok-icon-right1
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-pulldown1"></span>
            <div class="name">
              pull_down
            </div>
            <div class="code-name">.ok-icon-pulldown1
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-sousuo"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.ok-icon-sousuo
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-emojilight"></span>
            <div class="name">
              emoji_light
            </div>
            <div class="code-name">.ok-icon-emojilight
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-keyboardlight"></span>
            <div class="name">
              keyboard_light
            </div>
            <div class="code-name">.ok-icon-keyboardlight
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-recordfill"></span>
            <div class="name">
              record_fill
            </div>
            <div class="code-name">.ok-icon-recordfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-recordlight"></span>
            <div class="name">
              record_light
            </div>
            <div class="code-name">.ok-icon-recordlight
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-record"></span>
            <div class="name">
              record
            </div>
            <div class="code-name">.ok-icon-record
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-roundaddlight"></span>
            <div class="name">
              round_add_light
            </div>
            <div class="code-name">.ok-icon-roundaddlight
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-soundlight"></span>
            <div class="name">
              sound_light
            </div>
            <div class="code-name">.ok-icon-soundlight
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-cardboardfill"></span>
            <div class="name">
              cardboard_fill
            </div>
            <div class="code-name">.ok-icon-cardboardfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-cardboard"></span>
            <div class="name">
              cardboard
            </div>
            <div class="code-name">.ok-icon-cardboard
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-formfill"></span>
            <div class="name">
              form_fill
            </div>
            <div class="code-name">.ok-icon-formfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-coin"></span>
            <div class="name">
              coin
            </div>
            <div class="code-name">.ok-icon-coin
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-sortlight"></span>
            <div class="name">
              sort_light
            </div>
            <div class="code-name">.ok-icon-sortlight
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-yooxi"></span>
            <div class="name">
              ok
            </div>
            <div class="code-name">.ok-icon-yooxi
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-choose"></span>
            <div class="name">
              选择
            </div>
            <div class="code-name">.ok-icon-choose
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-cardboardforbid"></span>
            <div class="name">
              cardboard_forbid
            </div>
            <div class="code-name">.ok-icon-cardboardforbid
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-circlefill"></span>
            <div class="name">
              circle_fill
            </div>
            <div class="code-name">.ok-icon-circlefill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-circle"></span>
            <div class="name">
              circle
            </div>
            <div class="code-name">.ok-icon-circle
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-attentionforbid"></span>
            <div class="name">
              attention_forbid
            </div>
            <div class="code-name">.ok-icon-attentionforbid
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-attentionforbidfill"></span>
            <div class="name">
              attention_forbid_fill
            </div>
            <div class="code-name">.ok-icon-attentionforbidfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-attentionfavorfill"></span>
            <div class="name">
              attention_favor_fill
            </div>
            <div class="code-name">.ok-icon-attentionfavorfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-attentionfavor"></span>
            <div class="name">
              attention_favor
            </div>
            <div class="code-name">.ok-icon-attentionfavor
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-piclight"></span>
            <div class="name">
              pic_light
            </div>
            <div class="code-name">.ok-icon-piclight
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-shoplight"></span>
            <div class="name">
              shop_light
            </div>
            <div class="code-name">.ok-icon-shoplight
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-voicelight"></span>
            <div class="name">
              voice_light
            </div>
            <div class="code-name">.ok-icon-voicelight
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-attentionfavorfill-copy"></span>
            <div class="name">
              attention_favor_fill
            </div>
            <div class="code-name">.ok-icon-attentionfavorfill-copy
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-umidd17"></span>
            <div class="name">
              支付宝
            </div>
            <div class="code-name">.ok-icon-umidd17
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-full"></span>
            <div class="name">
              full
            </div>
            <div class="code-name">.ok-icon-full
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-mail"></span>
            <div class="name">
              mail
            </div>
            <div class="code-name">.ok-icon-mail
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-peoplelist"></span>
            <div class="name">
              people_list
            </div>
            <div class="code-name">.ok-icon-peoplelist
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-goodsnewfill"></span>
            <div class="name">
              goods_new_fill
            </div>
            <div class="code-name">.ok-icon-goodsnewfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-goodsnew"></span>
            <div class="name">
              goods_new
            </div>
            <div class="code-name">.ok-icon-goodsnew
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-medalfill"></span>
            <div class="name">
              medal_fill
            </div>
            <div class="code-name">.ok-icon-medalfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-medal"></span>
            <div class="name">
              medal
            </div>
            <div class="code-name">.ok-icon-medal
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-newsfill"></span>
            <div class="name">
              news_fill
            </div>
            <div class="code-name">.ok-icon-newsfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-newshotfill"></span>
            <div class="name">
              news_hot_fill
            </div>
            <div class="code-name">.ok-icon-newshotfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-newshot"></span>
            <div class="name">
              news_hot
            </div>
            <div class="code-name">.ok-icon-newshot
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-news"></span>
            <div class="name">
              news
            </div>
            <div class="code-name">.ok-icon-news
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-videofill"></span>
            <div class="name">
              video_fill
            </div>
            <div class="code-name">.ok-icon-videofill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-video"></span>
            <div class="name">
              video
            </div>
            <div class="code-name">.ok-icon-video
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-askfill"></span>
            <div class="name">
              ask_fill
            </div>
            <div class="code-name">.ok-icon-askfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-ask"></span>
            <div class="name">
              ask
            </div>
            <div class="code-name">.ok-icon-ask
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-exit"></span>
            <div class="name">
              exit
            </div>
            <div class="code-name">.ok-icon-exit
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-skinfill"></span>
            <div class="name">
              skin_fill
            </div>
            <div class="code-name">.ok-icon-skinfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-skin"></span>
            <div class="name">
              skin
            </div>
            <div class="code-name">.ok-icon-skin
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-moneybagfill"></span>
            <div class="name">
              money_bag_fill
            </div>
            <div class="code-name">.ok-icon-moneybagfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-usefullfill"></span>
            <div class="name">
              usefull_fill
            </div>
            <div class="code-name">.ok-icon-usefullfill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-usefull"></span>
            <div class="name">
              usefull
            </div>
            <div class="code-name">.ok-icon-usefull
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-moneybag"></span>
            <div class="name">
              money_bag
            </div>
            <div class="code-name">.ok-icon-moneybag
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-download"></span>
            <div class="name">
              下载
            </div>
            <div class="code-name">.ok-icon-download
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-redpacket_fill"></span>
            <div class="name">
              redpacket_fill
            </div>
            <div class="code-name">.ok-icon-redpacket_fill
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-subscription"></span>
            <div class="name">
              subscription
            </div>
            <div class="code-name">.ok-icon-subscription
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-xuanzeanniu"></span>
            <div class="name">
              选择按钮
            </div>
            <div class="code-name">.ok-icon-xuanzeanniu
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-weibiaoti-"></span>
            <div class="name">
              第三方
            </div>
            <div class="code-name">.ok-icon-weibiaoti-
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-xiangqing"></span>
            <div class="name">
              详情
            </div>
            <div class="code-name">.ok-icon-xiangqing
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-shuju"></span>
            <div class="name">
              数据
            </div>
            <div class="code-name">.ok-icon-shuju
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-home_light"></span>
            <div class="name">
              home_light
            </div>
            <div class="code-name">.ok-icon-home_light
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-my_light"></span>
            <div class="name">
              my_light
            </div>
            <div class="code-name">.ok-icon-my_light
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-disanfangQQ"></span>
            <div class="name">
              第三方 QQ
            </div>
            <div class="code-name">.ok-icon-disanfangQQ
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-chinamap-chart"></span>
            <div class="name">
              中国地图
            </div>
            <div class="code-name">.ok-icon-chinamap-chart
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-tubiaozhizuomoban"></span>
            <div class="name">
              地图
            </div>
            <div class="code-name">.ok-icon-tubiaozhizuomoban
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-set"></span>
            <div class="name">
              set
            </div>
            <div class="code-name">.ok-icon-set
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-yun"></span>
            <div class="name">
              云
            </div>
            <div class="code-name">.ok-icon-yun
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-kongzhitai_"></span>
            <div class="name">
              控制台
            </div>
            <div class="code-name">.ok-icon-kongzhitai_
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-shuju1"></span>
            <div class="name">
              数据
            </div>
            <div class="code-name">.ok-icon-shuju1
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-shuju2"></span>
            <div class="name">
              数据
            </div>
            <div class="code-name">.ok-icon-shuju2
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-disanfang"></span>
            <div class="name">
              第三方
            </div>
            <div class="code-name">.ok-icon-disanfang
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-shuju3"></span>
            <div class="name">
              数据
            </div>
            <div class="code-name">.ok-icon-shuju3
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-kongzhitai"></span>
            <div class="name">
              控制台
            </div>
            <div class="code-name">.ok-icon-kongzhitai
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-headset"></span>
            <div class="name">
              耳机
            </div>
            <div class="code-name">.ok-icon-headset
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-shezhi"></span>
            <div class="name">
              设 置
            </div>
            <div class="code-name">.ok-icon-shezhi
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-up-copy"></span>
            <div class="name">
              下拉
            </div>
            <div class="code-name">.ok-icon-up-copy
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-down-copy"></span>
            <div class="name">
              下拉
            </div>
            <div class="code-name">.ok-icon-down-copy
            </div>
          </li>

          <li class="dib">
            <span class="icon ok-icon ok-icon-left-copy"></span>
            <div class="name">
              下拉
            </div>
            <div class="code-name">.ok-icon-left-copy
            </div>
          </li>

        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="ok-icon ok-icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            ok-icon" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-appreciate"></use>
                </svg>
                <div class="name">appreciate</div>
                <div class="code-name">#ok-icon-appreciate</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-check"></use>
                </svg>
                <div class="name">check</div>
                <div class="code-name">#ok-icon-check</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-close"></use>
                </svg>
                <div class="name">close</div>
                <div class="code-name">#ok-icon-close</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-edit"></use>
                </svg>
                <div class="name">edit</div>
                <div class="code-name">#ok-icon-edit</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-emoji"></use>
                </svg>
                <div class="name">emoji</div>
                <div class="code-name">#ok-icon-emoji</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-favorfill"></use>
                </svg>
                <div class="name">favor_fill</div>
                <div class="code-name">#ok-icon-favorfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-favor"></use>
                </svg>
                <div class="name">favor</div>
                <div class="code-name">#ok-icon-favor</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-loading"></use>
                </svg>
                <div class="name">loading</div>
                <div class="code-name">#ok-icon-loading</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-locationfill"></use>
                </svg>
                <div class="name">location_fill</div>
                <div class="code-name">#ok-icon-locationfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-location"></use>
                </svg>
                <div class="name">location</div>
                <div class="code-name">#ok-icon-location</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-phone"></use>
                </svg>
                <div class="name">phone</div>
                <div class="code-name">#ok-icon-phone</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-roundcheckfill"></use>
                </svg>
                <div class="name">round_check_fill</div>
                <div class="code-name">#ok-icon-roundcheckfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-roundcheck"></use>
                </svg>
                <div class="name">round_check</div>
                <div class="code-name">#ok-icon-roundcheck</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-roundclosefill"></use>
                </svg>
                <div class="name">round_close_fill</div>
                <div class="code-name">#ok-icon-roundclosefill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-roundclose"></use>
                </svg>
                <div class="name">round_close</div>
                <div class="code-name">#ok-icon-roundclose</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-roundrightfill"></use>
                </svg>
                <div class="name">round_right_fill</div>
                <div class="code-name">#ok-icon-roundrightfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-roundright"></use>
                </svg>
                <div class="name">round_right</div>
                <div class="code-name">#ok-icon-roundright</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-search"></use>
                </svg>
                <div class="name">search</div>
                <div class="code-name">#ok-icon-search</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-taxi"></use>
                </svg>
                <div class="name">taxi</div>
                <div class="code-name">#ok-icon-taxi</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-timefill"></use>
                </svg>
                <div class="name">time_fill</div>
                <div class="code-name">#ok-icon-timefill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-time"></use>
                </svg>
                <div class="name">time</div>
                <div class="code-name">#ok-icon-time</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-unfold"></use>
                </svg>
                <div class="name">unfold</div>
                <div class="code-name">#ok-icon-unfold</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-warnfill"></use>
                </svg>
                <div class="name">warn_fill</div>
                <div class="code-name">#ok-icon-warnfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-warn"></use>
                </svg>
                <div class="name">warn</div>
                <div class="code-name">#ok-icon-warn</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-camerafill"></use>
                </svg>
                <div class="name">camera_fill</div>
                <div class="code-name">#ok-icon-camerafill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-camera"></use>
                </svg>
                <div class="name">camera</div>
                <div class="code-name">#ok-icon-camera</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-commentfill"></use>
                </svg>
                <div class="name">comment_fill</div>
                <div class="code-name">#ok-icon-commentfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-comment"></use>
                </svg>
                <div class="name">comment</div>
                <div class="code-name">#ok-icon-comment</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-likefill"></use>
                </svg>
                <div class="name">like_fill</div>
                <div class="code-name">#ok-icon-likefill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-like"></use>
                </svg>
                <div class="name">like</div>
                <div class="code-name">#ok-icon-like</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-notificationfill"></use>
                </svg>
                <div class="name">notification_fill</div>
                <div class="code-name">#ok-icon-notificationfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-notification"></use>
                </svg>
                <div class="name">notification</div>
                <div class="code-name">#ok-icon-notification</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-order"></use>
                </svg>
                <div class="name">order</div>
                <div class="code-name">#ok-icon-order</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-samefill"></use>
                </svg>
                <div class="name">same_fill</div>
                <div class="code-name">#ok-icon-samefill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-same"></use>
                </svg>
                <div class="name">same</div>
                <div class="code-name">#ok-icon-same</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-deliver"></use>
                </svg>
                <div class="name">deliver</div>
                <div class="code-name">#ok-icon-deliver</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-evaluate"></use>
                </svg>
                <div class="name">evaluate</div>
                <div class="code-name">#ok-icon-evaluate</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-pay"></use>
                </svg>
                <div class="name">pay</div>
                <div class="code-name">#ok-icon-pay</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-send"></use>
                </svg>
                <div class="name">send</div>
                <div class="code-name">#ok-icon-send</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-shop"></use>
                </svg>
                <div class="name">shop</div>
                <div class="code-name">#ok-icon-shop</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-ticket"></use>
                </svg>
                <div class="name">ticket</div>
                <div class="code-name">#ok-icon-ticket</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-wang"></use>
                </svg>
                <div class="name">wang</div>
                <div class="code-name">#ok-icon-wang</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-back"></use>
                </svg>
                <div class="name">back</div>
                <div class="code-name">#ok-icon-back</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-cascades"></use>
                </svg>
                <div class="name">cascades</div>
                <div class="code-name">#ok-icon-cascades</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-discover"></use>
                </svg>
                <div class="name">discover</div>
                <div class="code-name">#ok-icon-discover</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-list"></use>
                </svg>
                <div class="name">list</div>
                <div class="code-name">#ok-icon-list</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-more"></use>
                </svg>
                <div class="name">more</div>
                <div class="code-name">#ok-icon-more</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-scan"></use>
                </svg>
                <div class="name">scan</div>
                <div class="code-name">#ok-icon-scan</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-settings"></use>
                </svg>
                <div class="name">settings</div>
                <div class="code-name">#ok-icon-settings</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-questionfill"></use>
                </svg>
                <div class="name">question_fill</div>
                <div class="code-name">#ok-icon-questionfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-question"></use>
                </svg>
                <div class="name">question</div>
                <div class="code-name">#ok-icon-question</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-shopfill"></use>
                </svg>
                <div class="name">shop_fill</div>
                <div class="code-name">#ok-icon-shopfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-form"></use>
                </svg>
                <div class="name">form</div>
                <div class="code-name">#ok-icon-form</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-wangfill"></use>
                </svg>
                <div class="name">wang_fill</div>
                <div class="code-name">#ok-icon-wangfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-pic"></use>
                </svg>
                <div class="name">pic</div>
                <div class="code-name">#ok-icon-pic</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-filter"></use>
                </svg>
                <div class="name">filter</div>
                <div class="code-name">#ok-icon-filter</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-footprint"></use>
                </svg>
                <div class="name">footprint</div>
                <div class="code-name">#ok-icon-footprint</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-top"></use>
                </svg>
                <div class="name">top</div>
                <div class="code-name">#ok-icon-top</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-pulldown"></use>
                </svg>
                <div class="name">pull_down</div>
                <div class="code-name">#ok-icon-pulldown</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-pullup"></use>
                </svg>
                <div class="name">pull_up</div>
                <div class="code-name">#ok-icon-pullup</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-right"></use>
                </svg>
                <div class="name">right</div>
                <div class="code-name">#ok-icon-right</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-refresh"></use>
                </svg>
                <div class="name">refresh</div>
                <div class="code-name">#ok-icon-refresh</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-moreandroid"></use>
                </svg>
                <div class="name">more_android</div>
                <div class="code-name">#ok-icon-moreandroid</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-deletefill"></use>
                </svg>
                <div class="name">delete_fill</div>
                <div class="code-name">#ok-icon-deletefill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-refund"></use>
                </svg>
                <div class="name">refund</div>
                <div class="code-name">#ok-icon-refund</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-cart"></use>
                </svg>
                <div class="name">cart</div>
                <div class="code-name">#ok-icon-cart</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-qrcode"></use>
                </svg>
                <div class="name">qr_code</div>
                <div class="code-name">#ok-icon-qrcode</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-remind"></use>
                </svg>
                <div class="name">remind</div>
                <div class="code-name">#ok-icon-remind</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-delete"></use>
                </svg>
                <div class="name">delete</div>
                <div class="code-name">#ok-icon-delete</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-profile"></use>
                </svg>
                <div class="name">profile</div>
                <div class="code-name">#ok-icon-profile</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-home"></use>
                </svg>
                <div class="name">home</div>
                <div class="code-name">#ok-icon-home</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-cartfill"></use>
                </svg>
                <div class="name">cart_fill</div>
                <div class="code-name">#ok-icon-cartfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-discoverfill"></use>
                </svg>
                <div class="name">discover_fill</div>
                <div class="code-name">#ok-icon-discoverfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-homefill"></use>
                </svg>
                <div class="name">home_fill</div>
                <div class="code-name">#ok-icon-homefill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-message"></use>
                </svg>
                <div class="name">message</div>
                <div class="code-name">#ok-icon-message</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-addressbook"></use>
                </svg>
                <div class="name">address_book</div>
                <div class="code-name">#ok-icon-addressbook</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-link"></use>
                </svg>
                <div class="name">link</div>
                <div class="code-name">#ok-icon-link</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-lock"></use>
                </svg>
                <div class="name">lock</div>
                <div class="code-name">#ok-icon-lock</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-unlock"></use>
                </svg>
                <div class="name">unlock</div>
                <div class="code-name">#ok-icon-unlock</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-vip"></use>
                </svg>
                <div class="name">vip</div>
                <div class="code-name">#ok-icon-vip</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-weibo"></use>
                </svg>
                <div class="name">weibo</div>
                <div class="code-name">#ok-icon-weibo</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-activity"></use>
                </svg>
                <div class="name">activity</div>
                <div class="code-name">#ok-icon-activity</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-big"></use>
                </svg>
                <div class="name">big</div>
                <div class="code-name">#ok-icon-big</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-friendaddfill"></use>
                </svg>
                <div class="name">friend_add_fill</div>
                <div class="code-name">#ok-icon-friendaddfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-friendadd"></use>
                </svg>
                <div class="name">friend_add</div>
                <div class="code-name">#ok-icon-friendadd</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-friendfamous"></use>
                </svg>
                <div class="name">friend_famous</div>
                <div class="code-name">#ok-icon-friendfamous</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-friend"></use>
                </svg>
                <div class="name">friend</div>
                <div class="code-name">#ok-icon-friend</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-goods"></use>
                </svg>
                <div class="name">goods</div>
                <div class="code-name">#ok-icon-goods</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-selection"></use>
                </svg>
                <div class="name">selection</div>
                <div class="code-name">#ok-icon-selection</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-tmall"></use>
                </svg>
                <div class="name">tmall</div>
                <div class="code-name">#ok-icon-tmall</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-explore"></use>
                </svg>
                <div class="name">explore</div>
                <div class="code-name">#ok-icon-explore</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-present"></use>
                </svg>
                <div class="name">present</div>
                <div class="code-name">#ok-icon-present</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-squarecheckfill"></use>
                </svg>
                <div class="name">square_check_fill</div>
                <div class="code-name">#ok-icon-squarecheckfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-square"></use>
                </svg>
                <div class="name">square</div>
                <div class="code-name">#ok-icon-square</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-squarecheck"></use>
                </svg>
                <div class="name">square_check</div>
                <div class="code-name">#ok-icon-squarecheck</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-round"></use>
                </svg>
                <div class="name">round</div>
                <div class="code-name">#ok-icon-round</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-roundaddfill"></use>
                </svg>
                <div class="name">round_add_fill</div>
                <div class="code-name">#ok-icon-roundaddfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-roundadd"></use>
                </svg>
                <div class="name">round_add</div>
                <div class="code-name">#ok-icon-roundadd</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-add"></use>
                </svg>
                <div class="name">add</div>
                <div class="code-name">#ok-icon-add</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-notificationforbidfill"></use>
                </svg>
                <div class="name">notification_forbid_fill</div>
                <div class="code-name">#ok-icon-notificationforbidfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-explorefill"></use>
                </svg>
                <div class="name">explore_fill</div>
                <div class="code-name">#ok-icon-explorefill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-fold"></use>
                </svg>
                <div class="name">fold</div>
                <div class="code-name">#ok-icon-fold</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-game"></use>
                </svg>
                <div class="name">game</div>
                <div class="code-name">#ok-icon-game</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-redpacket"></use>
                </svg>
                <div class="name">redpacket</div>
                <div class="code-name">#ok-icon-redpacket</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-selectionfill"></use>
                </svg>
                <div class="name">selection_fill</div>
                <div class="code-name">#ok-icon-selectionfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-similar"></use>
                </svg>
                <div class="name">similar</div>
                <div class="code-name">#ok-icon-similar</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-appreciatefill"></use>
                </svg>
                <div class="name">appreciate_fill</div>
                <div class="code-name">#ok-icon-appreciatefill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-infofill"></use>
                </svg>
                <div class="name">info_fill</div>
                <div class="code-name">#ok-icon-infofill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-info"></use>
                </svg>
                <div class="name">info</div>
                <div class="code-name">#ok-icon-info</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-tao"></use>
                </svg>
                <div class="name">tao</div>
                <div class="code-name">#ok-icon-tao</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-mobiletao"></use>
                </svg>
                <div class="name">mobile_tao</div>
                <div class="code-name">#ok-icon-mobiletao</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-forwardfill"></use>
                </svg>
                <div class="name">forward_fill</div>
                <div class="code-name">#ok-icon-forwardfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-forward"></use>
                </svg>
                <div class="name">forward</div>
                <div class="code-name">#ok-icon-forward</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-rechargefill"></use>
                </svg>
                <div class="name">recharge_fill</div>
                <div class="code-name">#ok-icon-rechargefill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-recharge"></use>
                </svg>
                <div class="name">recharge</div>
                <div class="code-name">#ok-icon-recharge</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-vipcard"></use>
                </svg>
                <div class="name">vipcard</div>
                <div class="code-name">#ok-icon-vipcard</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-voice"></use>
                </svg>
                <div class="name">voice</div>
                <div class="code-name">#ok-icon-voice</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-voicefill"></use>
                </svg>
                <div class="name">voice_fill</div>
                <div class="code-name">#ok-icon-voicefill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-friendfavor"></use>
                </svg>
                <div class="name">friend_favor</div>
                <div class="code-name">#ok-icon-friendfavor</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-wifi"></use>
                </svg>
                <div class="name">wifi</div>
                <div class="code-name">#ok-icon-wifi</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-share"></use>
                </svg>
                <div class="name">share</div>
                <div class="code-name">#ok-icon-share</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-wefill"></use>
                </svg>
                <div class="name">we_fill</div>
                <div class="code-name">#ok-icon-wefill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-we"></use>
                </svg>
                <div class="name">we</div>
                <div class="code-name">#ok-icon-we</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-lightauto"></use>
                </svg>
                <div class="name">light_auto</div>
                <div class="code-name">#ok-icon-lightauto</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-lightforbid"></use>
                </svg>
                <div class="name">light_forbid</div>
                <div class="code-name">#ok-icon-lightforbid</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-lightfill"></use>
                </svg>
                <div class="name">light_fill</div>
                <div class="code-name">#ok-icon-lightfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-camerarotate"></use>
                </svg>
                <div class="name">camera_rotate</div>
                <div class="code-name">#ok-icon-camerarotate</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-light"></use>
                </svg>
                <div class="name">light</div>
                <div class="code-name">#ok-icon-light</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-barcode"></use>
                </svg>
                <div class="name">bar_code</div>
                <div class="code-name">#ok-icon-barcode</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-flashlightclose"></use>
                </svg>
                <div class="name">flashlight_close</div>
                <div class="code-name">#ok-icon-flashlightclose</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-flashlightopen"></use>
                </svg>
                <div class="name">flashlight_open</div>
                <div class="code-name">#ok-icon-flashlightopen</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-searchlist"></use>
                </svg>
                <div class="name">search_list</div>
                <div class="code-name">#ok-icon-searchlist</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-service"></use>
                </svg>
                <div class="name">service</div>
                <div class="code-name">#ok-icon-service</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-sort"></use>
                </svg>
                <div class="name">sort</div>
                <div class="code-name">#ok-icon-sort</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-down"></use>
                </svg>
                <div class="name">down</div>
                <div class="code-name">#ok-icon-down</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-mobile"></use>
                </svg>
                <div class="name">mobile</div>
                <div class="code-name">#ok-icon-mobile</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-mobilefill"></use>
                </svg>
                <div class="name">mobile_fill</div>
                <div class="code-name">#ok-icon-mobilefill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-copy"></use>
                </svg>
                <div class="name">copy</div>
                <div class="code-name">#ok-icon-copy</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-countdownfill"></use>
                </svg>
                <div class="name">countdown_fill</div>
                <div class="code-name">#ok-icon-countdownfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-countdown"></use>
                </svg>
                <div class="name">countdown</div>
                <div class="code-name">#ok-icon-countdown</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-noticefill"></use>
                </svg>
                <div class="name">notice_fill</div>
                <div class="code-name">#ok-icon-noticefill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-notice"></use>
                </svg>
                <div class="name">notice</div>
                <div class="code-name">#ok-icon-notice</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-qiang"></use>
                </svg>
                <div class="name">qiang</div>
                <div class="code-name">#ok-icon-qiang</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-upstagefill"></use>
                </svg>
                <div class="name">upstage_fill</div>
                <div class="code-name">#ok-icon-upstagefill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-upstage"></use>
                </svg>
                <div class="name">upstage</div>
                <div class="code-name">#ok-icon-upstage</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-babyfill"></use>
                </svg>
                <div class="name">baby_fill</div>
                <div class="code-name">#ok-icon-babyfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-baby"></use>
                </svg>
                <div class="name">baby</div>
                <div class="code-name">#ok-icon-baby</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-brandfill"></use>
                </svg>
                <div class="name">brand_fill</div>
                <div class="code-name">#ok-icon-brandfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-brand"></use>
                </svg>
                <div class="name">brand</div>
                <div class="code-name">#ok-icon-brand</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-choicenessfill"></use>
                </svg>
                <div class="name">choiceness_fill</div>
                <div class="code-name">#ok-icon-choicenessfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-choiceness"></use>
                </svg>
                <div class="name">choiceness</div>
                <div class="code-name">#ok-icon-choiceness</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-clothesfill"></use>
                </svg>
                <div class="name">clothes_fill</div>
                <div class="code-name">#ok-icon-clothesfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-clothes"></use>
                </svg>
                <div class="name">clothes</div>
                <div class="code-name">#ok-icon-clothes</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-creativefill"></use>
                </svg>
                <div class="name">creative_fill</div>
                <div class="code-name">#ok-icon-creativefill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-creative"></use>
                </svg>
                <div class="name">creative</div>
                <div class="code-name">#ok-icon-creative</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-female"></use>
                </svg>
                <div class="name">female</div>
                <div class="code-name">#ok-icon-female</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-keyboard"></use>
                </svg>
                <div class="name">keyboard</div>
                <div class="code-name">#ok-icon-keyboard</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-male"></use>
                </svg>
                <div class="name">male</div>
                <div class="code-name">#ok-icon-male</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-newfill"></use>
                </svg>
                <div class="name">new_fill</div>
                <div class="code-name">#ok-icon-newfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-new"></use>
                </svg>
                <div class="name">new</div>
                <div class="code-name">#ok-icon-new</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-pullleft"></use>
                </svg>
                <div class="name">pull_left</div>
                <div class="code-name">#ok-icon-pullleft</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-pullright"></use>
                </svg>
                <div class="name">pull_right</div>
                <div class="code-name">#ok-icon-pullright</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-rankfill"></use>
                </svg>
                <div class="name">rank_fill</div>
                <div class="code-name">#ok-icon-rankfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-rank"></use>
                </svg>
                <div class="name">rank</div>
                <div class="code-name">#ok-icon-rank</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-bad"></use>
                </svg>
                <div class="name">bad</div>
                <div class="code-name">#ok-icon-bad</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-cameraadd"></use>
                </svg>
                <div class="name">camera_add</div>
                <div class="code-name">#ok-icon-cameraadd</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-focus"></use>
                </svg>
                <div class="name">focus</div>
                <div class="code-name">#ok-icon-focus</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-friendfill"></use>
                </svg>
                <div class="name">friend_fill</div>
                <div class="code-name">#ok-icon-friendfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-cameraaddfill"></use>
                </svg>
                <div class="name">camera_add_fill</div>
                <div class="code-name">#ok-icon-cameraaddfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-apps"></use>
                </svg>
                <div class="name">apps</div>
                <div class="code-name">#ok-icon-apps</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-paintfill"></use>
                </svg>
                <div class="name">paint_fill</div>
                <div class="code-name">#ok-icon-paintfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-paint"></use>
                </svg>
                <div class="name">paint</div>
                <div class="code-name">#ok-icon-paint</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-picfill"></use>
                </svg>
                <div class="name">pic_fill</div>
                <div class="code-name">#ok-icon-picfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-refresharrow"></use>
                </svg>
                <div class="name">refresh_arrow</div>
                <div class="code-name">#ok-icon-refresharrow</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-markfill"></use>
                </svg>
                <div class="name">mark_fill</div>
                <div class="code-name">#ok-icon-markfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-mark"></use>
                </svg>
                <div class="name">mark</div>
                <div class="code-name">#ok-icon-mark</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-presentfill"></use>
                </svg>
                <div class="name">present_fill</div>
                <div class="code-name">#ok-icon-presentfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-repeal"></use>
                </svg>
                <div class="name">repeal</div>
                <div class="code-name">#ok-icon-repeal</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-album"></use>
                </svg>
                <div class="name">album</div>
                <div class="code-name">#ok-icon-album</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-peoplefill"></use>
                </svg>
                <div class="name">people_fill</div>
                <div class="code-name">#ok-icon-peoplefill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-people"></use>
                </svg>
                <div class="name">people</div>
                <div class="code-name">#ok-icon-people</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-servicefill"></use>
                </svg>
                <div class="name">service_fill</div>
                <div class="code-name">#ok-icon-servicefill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-repair"></use>
                </svg>
                <div class="name">repair</div>
                <div class="code-name">#ok-icon-repair</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-file"></use>
                </svg>
                <div class="name">file</div>
                <div class="code-name">#ok-icon-file</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-repairfill"></use>
                </svg>
                <div class="name">repair_fill</div>
                <div class="code-name">#ok-icon-repairfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-taoxiaopu"></use>
                </svg>
                <div class="name">taoxiaopu</div>
                <div class="code-name">#ok-icon-taoxiaopu</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-attentionfill"></use>
                </svg>
                <div class="name">attention_fill</div>
                <div class="code-name">#ok-icon-attentionfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-attention"></use>
                </svg>
                <div class="name">attention</div>
                <div class="code-name">#ok-icon-attention</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-commandfill"></use>
                </svg>
                <div class="name">command_fill</div>
                <div class="code-name">#ok-icon-commandfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-command"></use>
                </svg>
                <div class="name">command</div>
                <div class="code-name">#ok-icon-command</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-communityfill"></use>
                </svg>
                <div class="name">community_fill</div>
                <div class="code-name">#ok-icon-communityfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-community"></use>
                </svg>
                <div class="name">community</div>
                <div class="code-name">#ok-icon-community</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-read"></use>
                </svg>
                <div class="name">read</div>
                <div class="code-name">#ok-icon-read</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-suan"></use>
                </svg>
                <div class="name">suan</div>
                <div class="code-name">#ok-icon-suan</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-hua"></use>
                </svg>
                <div class="name">hua</div>
                <div class="code-name">#ok-icon-hua</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-ju"></use>
                </svg>
                <div class="name">ju</div>
                <div class="code-name">#ok-icon-ju</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-tian"></use>
                </svg>
                <div class="name">tian</div>
                <div class="code-name">#ok-icon-tian</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-calendar"></use>
                </svg>
                <div class="name">calendar</div>
                <div class="code-name">#ok-icon-calendar</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-cut"></use>
                </svg>
                <div class="name">cut</div>
                <div class="code-name">#ok-icon-cut</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-magic"></use>
                </svg>
                <div class="name">magic</div>
                <div class="code-name">#ok-icon-magic</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-backwardfill"></use>
                </svg>
                <div class="name">backward_fill</div>
                <div class="code-name">#ok-icon-backwardfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-playfill"></use>
                </svg>
                <div class="name">play_fill</div>
                <div class="code-name">#ok-icon-playfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-stop"></use>
                </svg>
                <div class="name">stop</div>
                <div class="code-name">#ok-icon-stop</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-tagfill"></use>
                </svg>
                <div class="name">tag_fill</div>
                <div class="code-name">#ok-icon-tagfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-tag"></use>
                </svg>
                <div class="name">tag</div>
                <div class="code-name">#ok-icon-tag</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-group"></use>
                </svg>
                <div class="name">group</div>
                <div class="code-name">#ok-icon-group</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-all"></use>
                </svg>
                <div class="name">all</div>
                <div class="code-name">#ok-icon-all</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-backdelete"></use>
                </svg>
                <div class="name">back_delete</div>
                <div class="code-name">#ok-icon-backdelete</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-hotfill"></use>
                </svg>
                <div class="name">hot_fill</div>
                <div class="code-name">#ok-icon-hotfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-hot"></use>
                </svg>
                <div class="name">hot</div>
                <div class="code-name">#ok-icon-hot</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-post"></use>
                </svg>
                <div class="name">post</div>
                <div class="code-name">#ok-icon-post</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-radiobox"></use>
                </svg>
                <div class="name">radio_box</div>
                <div class="code-name">#ok-icon-radiobox</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-rounddown"></use>
                </svg>
                <div class="name">round_down</div>
                <div class="code-name">#ok-icon-rounddown</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-upload"></use>
                </svg>
                <div class="name">upload</div>
                <div class="code-name">#ok-icon-upload</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-writefill"></use>
                </svg>
                <div class="name">write_fill</div>
                <div class="code-name">#ok-icon-writefill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-write"></use>
                </svg>
                <div class="name">write</div>
                <div class="code-name">#ok-icon-write</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-radioboxfill"></use>
                </svg>
                <div class="name">radio_box_fill</div>
                <div class="code-name">#ok-icon-radioboxfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-punch"></use>
                </svg>
                <div class="name">punch</div>
                <div class="code-name">#ok-icon-punch</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-shake"></use>
                </svg>
                <div class="name">shake</div>
                <div class="code-name">#ok-icon-shake</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-disanfangweibo"></use>
                </svg>
                <div class="name">第三方 微博</div>
                <div class="code-name">#ok-icon-disanfangweibo</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-disanfangweixin"></use>
                </svg>
                <div class="name">第三方 微信</div>
                <div class="code-name">#ok-icon-disanfangweixin</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-add1"></use>
                </svg>
                <div class="name">add</div>
                <div class="code-name">#ok-icon-add1</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-move"></use>
                </svg>
                <div class="name">move</div>
                <div class="code-name">#ok-icon-move</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-safe"></use>
                </svg>
                <div class="name">safe</div>
                <div class="code-name">#ok-icon-safe</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-haodian"></use>
                </svg>
                <div class="name">haodian</div>
                <div class="code-name">#ok-icon-haodian</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-mao"></use>
                </svg>
                <div class="name">mao</div>
                <div class="code-name">#ok-icon-mao</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-qi"></use>
                </svg>
                <div class="name">qi</div>
                <div class="code-name">#ok-icon-qi</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-ye"></use>
                </svg>
                <div class="name">ye</div>
                <div class="code-name">#ok-icon-ye</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-juhuasuan"></use>
                </svg>
                <div class="name">juhuasuan</div>
                <div class="code-name">#ok-icon-juhuasuan</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-taoqianggou"></use>
                </svg>
                <div class="name">taoqianggou</div>
                <div class="code-name">#ok-icon-taoqianggou</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-tianmao"></use>
                </svg>
                <div class="name">tianmao</div>
                <div class="code-name">#ok-icon-tianmao</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-activityfill"></use>
                </svg>
                <div class="name">activity_fill</div>
                <div class="code-name">#ok-icon-activityfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-crownfill"></use>
                </svg>
                <div class="name">crown_fill</div>
                <div class="code-name">#ok-icon-crownfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-crown"></use>
                </svg>
                <div class="name">crown</div>
                <div class="code-name">#ok-icon-crown</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-goodsfill"></use>
                </svg>
                <div class="name">goods_fill</div>
                <div class="code-name">#ok-icon-goodsfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-messagefill"></use>
                </svg>
                <div class="name">message_fill</div>
                <div class="code-name">#ok-icon-messagefill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-profilefill"></use>
                </svg>
                <div class="name">profile_fill</div>
                <div class="code-name">#ok-icon-profilefill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-sound"></use>
                </svg>
                <div class="name">sound</div>
                <div class="code-name">#ok-icon-sound</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-sponsorfill"></use>
                </svg>
                <div class="name">sponsor_fill</div>
                <div class="code-name">#ok-icon-sponsorfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-sponsor"></use>
                </svg>
                <div class="name">sponsor</div>
                <div class="code-name">#ok-icon-sponsor</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-upblock"></use>
                </svg>
                <div class="name">up_block</div>
                <div class="code-name">#ok-icon-upblock</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-weblock"></use>
                </svg>
                <div class="name">we_block</div>
                <div class="code-name">#ok-icon-weblock</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-weunblock"></use>
                </svg>
                <div class="name">we_unblock</div>
                <div class="code-name">#ok-icon-weunblock</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-1111"></use>
                </svg>
                <div class="name">1111</div>
                <div class="code-name">#ok-icon-1111</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-my"></use>
                </svg>
                <div class="name">my</div>
                <div class="code-name">#ok-icon-my</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-myfill"></use>
                </svg>
                <div class="name">my_fill</div>
                <div class="code-name">#ok-icon-myfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-emojifill"></use>
                </svg>
                <div class="name">emoji_fill</div>
                <div class="code-name">#ok-icon-emojifill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-emojiflashfill"></use>
                </svg>
                <div class="name">emoji_flash_fill</div>
                <div class="code-name">#ok-icon-emojiflashfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-flashbuyfill-copy"></use>
                </svg>
                <div class="name">flashbuy_fill</div>
                <div class="code-name">#ok-icon-flashbuyfill-copy</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-text"></use>
                </svg>
                <div class="name">text</div>
                <div class="code-name">#ok-icon-text</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-goodsfavor"></use>
                </svg>
                <div class="name">goods_favor</div>
                <div class="code-name">#ok-icon-goodsfavor</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-musicfill"></use>
                </svg>
                <div class="name">music_fill</div>
                <div class="code-name">#ok-icon-musicfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-musicforbidfill"></use>
                </svg>
                <div class="name">music_forbid_fill</div>
                <div class="code-name">#ok-icon-musicforbidfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-xiamiforbid"></use>
                </svg>
                <div class="name">xiami_forbid</div>
                <div class="code-name">#ok-icon-xiamiforbid</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-xiami"></use>
                </svg>
                <div class="name">xiami</div>
                <div class="code-name">#ok-icon-xiami</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-xuanze"></use>
                </svg>
                <div class="name">选择</div>
                <div class="code-name">#ok-icon-xuanze</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-roundleftfill"></use>
                </svg>
                <div class="name">round_left_fill</div>
                <div class="code-name">#ok-icon-roundleftfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-triangledownfill"></use>
                </svg>
                <div class="name">triangle_down_fill</div>
                <div class="code-name">#ok-icon-triangledownfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-triangleupfill"></use>
                </svg>
                <div class="name">triangle_up_fill</div>
                <div class="code-name">#ok-icon-triangleupfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-roundleftfill-copy"></use>
                </svg>
                <div class="name">round_left_fill</div>
                <div class="code-name">#ok-icon-roundleftfill-copy</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-right1"></use>
                </svg>
                <div class="name">下拉</div>
                <div class="code-name">#ok-icon-right1</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-pulldown1"></use>
                </svg>
                <div class="name">pull_down</div>
                <div class="code-name">#ok-icon-pulldown1</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-sousuo"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#ok-icon-sousuo</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-emojilight"></use>
                </svg>
                <div class="name">emoji_light</div>
                <div class="code-name">#ok-icon-emojilight</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-keyboardlight"></use>
                </svg>
                <div class="name">keyboard_light</div>
                <div class="code-name">#ok-icon-keyboardlight</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-recordfill"></use>
                </svg>
                <div class="name">record_fill</div>
                <div class="code-name">#ok-icon-recordfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-recordlight"></use>
                </svg>
                <div class="name">record_light</div>
                <div class="code-name">#ok-icon-recordlight</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-record"></use>
                </svg>
                <div class="name">record</div>
                <div class="code-name">#ok-icon-record</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-roundaddlight"></use>
                </svg>
                <div class="name">round_add_light</div>
                <div class="code-name">#ok-icon-roundaddlight</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-soundlight"></use>
                </svg>
                <div class="name">sound_light</div>
                <div class="code-name">#ok-icon-soundlight</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-cardboardfill"></use>
                </svg>
                <div class="name">cardboard_fill</div>
                <div class="code-name">#ok-icon-cardboardfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-cardboard"></use>
                </svg>
                <div class="name">cardboard</div>
                <div class="code-name">#ok-icon-cardboard</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-formfill"></use>
                </svg>
                <div class="name">form_fill</div>
                <div class="code-name">#ok-icon-formfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-coin"></use>
                </svg>
                <div class="name">coin</div>
                <div class="code-name">#ok-icon-coin</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-sortlight"></use>
                </svg>
                <div class="name">sort_light</div>
                <div class="code-name">#ok-icon-sortlight</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-yooxi"></use>
                </svg>
                <div class="name">ok</div>
                <div class="code-name">#ok-icon-yooxi</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-choose"></use>
                </svg>
                <div class="name">选择</div>
                <div class="code-name">#ok-icon-choose</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-cardboardforbid"></use>
                </svg>
                <div class="name">cardboard_forbid</div>
                <div class="code-name">#ok-icon-cardboardforbid</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-circlefill"></use>
                </svg>
                <div class="name">circle_fill</div>
                <div class="code-name">#ok-icon-circlefill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-circle"></use>
                </svg>
                <div class="name">circle</div>
                <div class="code-name">#ok-icon-circle</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-attentionforbid"></use>
                </svg>
                <div class="name">attention_forbid</div>
                <div class="code-name">#ok-icon-attentionforbid</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-attentionforbidfill"></use>
                </svg>
                <div class="name">attention_forbid_fill</div>
                <div class="code-name">#ok-icon-attentionforbidfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-attentionfavorfill"></use>
                </svg>
                <div class="name">attention_favor_fill</div>
                <div class="code-name">#ok-icon-attentionfavorfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-attentionfavor"></use>
                </svg>
                <div class="name">attention_favor</div>
                <div class="code-name">#ok-icon-attentionfavor</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-piclight"></use>
                </svg>
                <div class="name">pic_light</div>
                <div class="code-name">#ok-icon-piclight</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-shoplight"></use>
                </svg>
                <div class="name">shop_light</div>
                <div class="code-name">#ok-icon-shoplight</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-voicelight"></use>
                </svg>
                <div class="name">voice_light</div>
                <div class="code-name">#ok-icon-voicelight</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-attentionfavorfill-copy"></use>
                </svg>
                <div class="name">attention_favor_fill</div>
                <div class="code-name">#ok-icon-attentionfavorfill-copy</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-umidd17"></use>
                </svg>
                <div class="name">支付宝</div>
                <div class="code-name">#ok-icon-umidd17</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-full"></use>
                </svg>
                <div class="name">full</div>
                <div class="code-name">#ok-icon-full</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-mail"></use>
                </svg>
                <div class="name">mail</div>
                <div class="code-name">#ok-icon-mail</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-peoplelist"></use>
                </svg>
                <div class="name">people_list</div>
                <div class="code-name">#ok-icon-peoplelist</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-goodsnewfill"></use>
                </svg>
                <div class="name">goods_new_fill</div>
                <div class="code-name">#ok-icon-goodsnewfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-goodsnew"></use>
                </svg>
                <div class="name">goods_new</div>
                <div class="code-name">#ok-icon-goodsnew</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-medalfill"></use>
                </svg>
                <div class="name">medal_fill</div>
                <div class="code-name">#ok-icon-medalfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-medal"></use>
                </svg>
                <div class="name">medal</div>
                <div class="code-name">#ok-icon-medal</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-newsfill"></use>
                </svg>
                <div class="name">news_fill</div>
                <div class="code-name">#ok-icon-newsfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-newshotfill"></use>
                </svg>
                <div class="name">news_hot_fill</div>
                <div class="code-name">#ok-icon-newshotfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-newshot"></use>
                </svg>
                <div class="name">news_hot</div>
                <div class="code-name">#ok-icon-newshot</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-news"></use>
                </svg>
                <div class="name">news</div>
                <div class="code-name">#ok-icon-news</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-videofill"></use>
                </svg>
                <div class="name">video_fill</div>
                <div class="code-name">#ok-icon-videofill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-video"></use>
                </svg>
                <div class="name">video</div>
                <div class="code-name">#ok-icon-video</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-askfill"></use>
                </svg>
                <div class="name">ask_fill</div>
                <div class="code-name">#ok-icon-askfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-ask"></use>
                </svg>
                <div class="name">ask</div>
                <div class="code-name">#ok-icon-ask</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-exit"></use>
                </svg>
                <div class="name">exit</div>
                <div class="code-name">#ok-icon-exit</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-skinfill"></use>
                </svg>
                <div class="name">skin_fill</div>
                <div class="code-name">#ok-icon-skinfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-skin"></use>
                </svg>
                <div class="name">skin</div>
                <div class="code-name">#ok-icon-skin</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-moneybagfill"></use>
                </svg>
                <div class="name">money_bag_fill</div>
                <div class="code-name">#ok-icon-moneybagfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-usefullfill"></use>
                </svg>
                <div class="name">usefull_fill</div>
                <div class="code-name">#ok-icon-usefullfill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-usefull"></use>
                </svg>
                <div class="name">usefull</div>
                <div class="code-name">#ok-icon-usefull</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-moneybag"></use>
                </svg>
                <div class="name">money_bag</div>
                <div class="code-name">#ok-icon-moneybag</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-download"></use>
                </svg>
                <div class="name">下载</div>
                <div class="code-name">#ok-icon-download</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-redpacket_fill"></use>
                </svg>
                <div class="name">redpacket_fill</div>
                <div class="code-name">#ok-icon-redpacket_fill</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-subscription"></use>
                </svg>
                <div class="name">subscription</div>
                <div class="code-name">#ok-icon-subscription</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-xuanzeanniu"></use>
                </svg>
                <div class="name">选择按钮</div>
                <div class="code-name">#ok-icon-xuanzeanniu</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-weibiaoti-"></use>
                </svg>
                <div class="name">第三方</div>
                <div class="code-name">#ok-icon-weibiaoti-</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-xiangqing"></use>
                </svg>
                <div class="name">详情</div>
                <div class="code-name">#ok-icon-xiangqing</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-shuju"></use>
                </svg>
                <div class="name">数据</div>
                <div class="code-name">#ok-icon-shuju</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-home_light"></use>
                </svg>
                <div class="name">home_light</div>
                <div class="code-name">#ok-icon-home_light</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-my_light"></use>
                </svg>
                <div class="name">my_light</div>
                <div class="code-name">#ok-icon-my_light</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-disanfangQQ"></use>
                </svg>
                <div class="name">第三方 QQ</div>
                <div class="code-name">#ok-icon-disanfangQQ</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-chinamap-chart"></use>
                </svg>
                <div class="name">中国地图</div>
                <div class="code-name">#ok-icon-chinamap-chart</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-tubiaozhizuomoban"></use>
                </svg>
                <div class="name">地图</div>
                <div class="code-name">#ok-icon-tubiaozhizuomoban</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-set"></use>
                </svg>
                <div class="name">set</div>
                <div class="code-name">#ok-icon-set</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-yun"></use>
                </svg>
                <div class="name">云</div>
                <div class="code-name">#ok-icon-yun</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-kongzhitai_"></use>
                </svg>
                <div class="name">控制台</div>
                <div class="code-name">#ok-icon-kongzhitai_</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-shuju1"></use>
                </svg>
                <div class="name">数据</div>
                <div class="code-name">#ok-icon-shuju1</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-shuju2"></use>
                </svg>
                <div class="name">数据</div>
                <div class="code-name">#ok-icon-shuju2</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-disanfang"></use>
                </svg>
                <div class="name">第三方</div>
                <div class="code-name">#ok-icon-disanfang</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-shuju3"></use>
                </svg>
                <div class="name">数据</div>
                <div class="code-name">#ok-icon-shuju3</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-kongzhitai"></use>
                </svg>
                <div class="name">控制台</div>
                <div class="code-name">#ok-icon-kongzhitai</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-headset"></use>
                </svg>
                <div class="name">耳机</div>
                <div class="code-name">#ok-icon-headset</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-shezhi"></use>
                </svg>
                <div class="name">设 置</div>
                <div class="code-name">#ok-icon-shezhi</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-up-copy"></use>
                </svg>
                <div class="name">下拉</div>
                <div class="code-name">#ok-icon-up-copy</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-down-copy"></use>
                </svg>
                <div class="name">下拉</div>
                <div class="code-name">#ok-icon-down-copy</div>
            </li>

            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#ok-icon-left-copy"></use>
                </svg>
                <div class="name">下拉</div>
                <div class="code-name">#ok-icon-left-copy</div>
            </li>

          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
